remote-storage

<H3 align="center"><strong>remoteStorage</strong></H3> <div align="center">remoteStorage 是一个简单的库，它结合了 localStorage API 和远程服务器，以在不同浏览器和设备之间持久化数据。</div> <br /> <div align="center"> <a href="https://remote.storage">网站</a> <span> · </span> <a href="https://codesandbox.io/p/sandbox/remote-storage-demo-35hgqz?file=%2Fsrc%2Findex.ts">在线演示</a> <span> · </span> <a href="https://github.com/FrigadeHQ/remote-storage">源代码</a> <span> · </span> <a href="https://github.com/FrigadeHQ/remote-storage">文档</a></div> <br />

为什么

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

例如，假设你想向所有注册你产品的新用户展示一个欢迎模态框。如果你使用 localStorage 来跟踪用户是否已经看过这个模态框，每次用户切换设备或浏览器时，他们都会反复看到这个体验。

这就是 remoteStorage 的用武之地。使用与 localStorage 相同的 API，remoteStorage 允许你轻松地即时读写数据，同时在浏览器和设备之间保持状态，从而提供更好的用户体验。

特性

✨ 简单的 API（与 localStorage 相同）
🔐 安全（内置 JWT 支持）
👌 适用于所有 JavaScript 框架
📦 轻量级（压缩后约 1 kB）
🔓 开源服务器和客户端（MIT 许可证）
🆓 免费托管的社区服务器

快速开始

使用你喜欢的包管理器安装库：

npm install remote-storage

或者简单地在你的 HTML 中包含它：

<script src="https://unpkg.com/remote-storage@latest/dist/remote-storage.min.js" sync></script>

导入库并像使用 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)
  // 突出显示你的新功能！
}

就是这样！

文档

用户 ID

remoteStorage 使用用户 ID 来识别用户。用户 ID 是一个唯一标识用户的字符串。它可以是任何你想要的东西，但我们建议使用不可迭代的 UUID，以防止用户猜测其他用户的 ID 并访问他们的数据。

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

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

如果你不提供用户 ID，remoteStorage 将生成一个随机 UUID，每次用户访问你的网站时都会改变。这对于测试很有用，但违背了 remoteStorage 的目的，因为数据将无法在设备或浏览器之间持久化。

实例 ID

remoteStorage 使用实例 ID 来识别发出请求的应用程序实例。实例 ID 是一个唯一标识应用程序实例的字符串。通常，你会为同一应用程序实例的所有请求使用相同的实例 ID。

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

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

服务器

我们在 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'
})