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

Question

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

Answer 1

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

使用本地存储

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

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

如果您希望即使用户浏览离开也能保留数据，那么这种方法就很有效。

广播频道API

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

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