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'
})

服务器可以在几分钟内使用 Docker 启动。有关更多信息，请参阅服务器文档。

常见问题

我应该在 remoteStorage 中存储什么数据？

remoteStorage 应该只用于非敏感数据。我们建议将其用于用户偏好、设置和其他非敏感数据。由于公共 API 的性质，它不适合存储敏感数据，如密码或个人身份信息。

remoteStorage 与 localStorage 有什么不同？

localStorage 是一个浏览器 API，允许你在浏览器中存储数据。数据存储在用户设备上，不会在设备或浏览器之间共享。remoteStorage 是一个库，它结合了 localStorage API 和远程服务器，以在浏览器和设备之间持久化数据。

我如何对 remoteStorage 的请求进行身份验证？

remoteStorage 可以在没有任何身份验证的情况下使用，但我们强烈建议使用 JSON Web 令牌（JWT）来对服务器的请求进行身份验证。这可以通过在 .env 中设置 JWT_SECRET 环境变量为你的 JWT 密钥来完成。 有关更多信息，请参阅服务器文档。

贡献

我们随时欢迎拉取请求。请注意，如果你要提出重大更改，请确保先开一个问题进行讨论。这将确保你的 PR 在你开始工作之前就被接受。

对于任何尚未分配贡献者的现有问题，如果你想处理它，请随时在问题下评论。如果我们认为你适合，我们会将问题分配给你。

进行更改： 实现你的错误修复或功能，编写测试覆盖它，并确保所有测试都通过。确保你的提交利用了语义提交消息，并且你的提交消息遵循约定式提交格式。 然后向主分支开一个拉取请求。