LocalStorage平替RemoteStorage用法示例

什么是 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 协议开源，是一个值得关注的前端开源项目。

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.git
cd remote-storage/apps/remote-storage-server
cp .env.example .env
docker-compose build
docker-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 yo

更新于：2个月前