svelte - Svelte 中不相关组件之间的实时数据共享

Question

我有一个案例，我打开了两个选项卡 localhost:5000/和localhost:5000/stream并想更新 / 中的变量路径并查看 stream 中的更改实时路径。存储不是这样工作的，如果我将本地存储与存储一起使用，我会在 stream 上获取数据。刷新后才出现页面，这不是我需要的。有什么解决办法吗？

Answer 1

有两种方法可以做到这一点:

使用本地存储

正如您已经在做的那样，但您还必须监听存储中的更改:

window.addEventListener('storage', () => {
  const stored = window.localStorage.getItem(...)
  // update the store
})

如果您希望数据在用户浏览离开后仍然保留，那么这种方法就很有效。

广播 channel API

另一种方法是使用 BroadcastChannel API您可以在其中创建一个仅在至少打开 1 个选项卡时才持久的结构。

这里的概念是相同的:监听 channel 中的变化并更新商店，如果您更新商店本身，则广播它。