phpremotestorage技巧_分离吧 LocalStorage我爱上了 RemoteStorage

1. 什么是 RemoteStorage

RmoteStorage is a simple library that combines the localStorage API with a remote server to persist data across browsers and devices.

在 localStorage 中存储数据很有用，但当数据须要在多个设备或浏览器之间共享时，这并不是一个好的办理方案。

例如，假设想向所有注册产品的新用户显示欢迎模式，如果利用 localStorage 来跟踪用户是否已经看到此模式，则用户每次切换设备或浏览器时都会重复展示该模式。

（图片来自网络侵删）

这便是 RemoteStorage 的用武之地，其利用与 localStorage 相同的 API，remoteStorage 许可开拓者轻松地动态读写数据，同时跨浏览器和设备掩护状态，以供应更好的用户体验。

总结起来看，RemoteStorage 有以下精良特性：

✨ 大略的 API（与 localStorage 相同）适用于所有 Javascript 框架轻量级（缩小到 1 kB）开源做事器和客户端（MIT 容许证）免费托管社区做事器

目前 RmoteStorage 在 Github 通过 MIT 协议开源，是一个值得关注的前端开源项目。

2.RemoteStorage 的三要素用户 ID

RemoteStorage 利用用户 ID 来识别用户，用户 ID 是唯一标识用户的字符串。
它可以是您想要的任何内容，但建议利用不可迭代的 UUID 以防止用户预测其他用户 ID 并访问其数据。

用户 ID 在创建 RemoteStorage 的新实例时设置：

const remoteStorage = new RemoteStorage({ userId: '123e4567-e89b-12d3-a456-426614174000'})

如果不供应用户 ID，remoteStorage 将天生一个随机 UUID，每次用户访问站点时该 UUID 都会发生变革。
这对付测试很有用，但违背了远程存储的目的，由于数据不会跨设备或浏览器持久保存。

实例 ID

RemoteStorage 利用实例 ID 来标识发出要求的运用程序实例, 实例 ID 是唯一标识运用程序实例的字符串。
常日，须要对来自同一运用程序实例的所有要求利用相同的实例 ID。

实例 ID 在创建 RemoteStorage 的新实例时设置：

const remoteStorage = new RemoteStorage({ userId: '123e4567-e89b-12d3-a456-426614174000', instanceId: 'my-cool-app'})做事器

RemoteStorage 在 https://api.remote.storage 上供应免费的托管社区做事器（如果未供应 serverAddress，则为默认行为）。
此托管做事器不应用于生产运用程序，但它非常适宜测试和原型设计。

要利用不同的做事器，只需在创建 RemoteStorage 的新实例时通报 serverAddress 选项即可：

const remoteStorage = new RemoteStorage({ serverAddress: 'https://api.remote.storage', userId: '123e4567-e89b-12d3-a456-426614174000', instanceId: 'my-cool-app'})

自托管做事器的唯一条件是运行 Docker 和 Docker Compose 的系统。

利用 Docker 和 docker-compose 可以在几分钟内启动做事器，该镜像附带在端口 6379 上运行的 Redis 做事器以及在端口 4000 上运行的运用程序做事器。

首先，只需运行以下命令：

git clone git@github.com:FrigadeHQ/remote-storage.gitcd remote-storage/apps/remote-storage-servercp .env.example .envdocker-compose builddocker-compose up

此时做事器会在端口 4000 上运行，可以通过获取和设置一个值来测试：

curl -i -X PUT \ -H "x-remote-storage-instance-id:my-instance-id" \ -H "x-remote-storage-user-id:user-123" \ -d \'{"foo":"bar"}' \ 'http://localhost:4000/entities/some-key'

下面是详细的返回值：

curl -i -X GET \ -H "x-remote-storage-instance-id:my-instance-id" \ -H "x-remote-storage-user-id:user-123" \ 'http://localhost:4000/entities/some-key'HTTP/1.1 200 OK{"foo":"bar"}3. 如何利用 RemoteStorage

首先须要安装依赖：

npm install remote-storage

接着，可以导入库并像 localStorage 一样利用：

import {RemoteStorage} from 'remote-storage'const remoteStorage = new RemoteStorage({userId: "my-user-id"})const hasSeenNewFeature = await remoteStorage.getItem('hasSeenNewFeature')if (!hasSeenNewFeature) { await remoteStorage.setItem('hasSeenNewFeature', true) // Highlight your new and exciting feature!}4.RemoteStorage 的三个疑问该当在远程存储中存储哪些数据

RemoteStorage 只能用于非敏感数据，建议将其用于用户首选项、设置和其他非敏感数据等。
由于公共 API 的性子，它不太适宜存储密码或 PII 等敏感数据。

import {RemoteStorage} from 'remote-storage'const remoteStorage = new RemoteStorage({userId: "my-user-id"})// 把稳：不建议保存敏感数据const hasPassword = await remoteStorage.getItem('password')if (!hasPassword) { await remoteStorage.setItem('password', true) // Highlight your new and exciting feature!}远程存储与本地存储有何不同

localStorage 是一个浏览器 API，许可在浏览器中存储数据。
数据本地存储在用户设备上，不会在设备或浏览器之间共享。
RemoteStorage 是一个将 localStorage API 与远程做事器相结合的库，可跨浏览器和设备保存数据。

// 只存在在本地const person = {name: "Alex"};localStorage.setItem("user", person);console.log(localStorage.getItem("user"));// "[object Object]"; not useful!localStorage.setItem("user", JSON.stringify(person));console.log(JSON.parse(localStorage.getItem("user")));// {name: "Alex"}难道任何人都不能预测用户 ID 并访问其他人的数据吗

可以利用由包（例如 uuid）天生的秘密唯一 UUID 作为用户 ID，以保护对远程存储的调用。
不建议利用连续的数字 ID 或用户的电子邮件地址，由于这样可以轻松预测其他用户 ID 并访问他们的数据。

import {v1 as uuidv1 , v3, v5, v4 as uuidv4} from 'uuid';uuidv4(); // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'uuidv1(); // ⇨ '2c5ea4c0-4067-11e9-8bad-9b1deb4d3b7d'// 输入配置const v1options = { node: [0x01, 0x23, 0x45, 0x67, 0x89, 0xab], clockseq: 0x1234, msecs: new Date('2011-11-01').getTime(), nsecs: 5678,};uuidv1(v1options); // ⇨ '710b962e-041c-11e1-9234-0123456789ab'

或者，可以环绕 RemoteStorage 创建一个大略的包装器 / 代理 API，该 API 利用您自己的身份验证方法来验证用户的身份，然后再许可访问数据。
然后，可以选择一个不公开的安全且秘密的实例 ID，以确保只有运用程序可以访问数据。

参考资料

https://github.com/FrigadeHQ/remote-storage

https://github.com/FrigadeHQ/remote-storage/blob/main/apps/remote-storage-server/README.md

https://github.com/FrigadeHQ/remote-storage

https://remote.storage/

https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem

https://github.com/uuidjs/uuid

https://www.freecodecamp.org/news/how-to-store-objects-or-arrays-in-browser-local-storage/

https://www.codeproject.com/Articles/5329553/Use-Remote-Storage-a-Community-Derived-FOSS-Offlin

https://gamedevjs.com/articles/using-local-storage-for-high-scores-and-game-progress/

标签：RemoteStorage用户