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

Question

我有一个情况，我有两个选项卡打开localhost:5000/和localhost:5000/stream，并希望更新/路径中的变量，并实时查看stream路径中的变化。Store不是这样工作的，如果我使用本地存储和Store，我只有在刷新stream页面后才能获得数据，这不是我需要的。有什么解决办法吗?

Answer 1

有两种方法:

使用localStorage的

就像你已经在做的那样，但你也必须倾听存储中的变化:

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

如果您希望即使用户离开也能保留数据，则此方法可以很好地工作。

<<p>

BroadcastChannel API/strong>另一种方法是使用BroadcastChannel API，在该API中，您可以创建一个只在至少打开一个选项卡时才持久的结构。

这里的概念是一样的:收听频道的变化并更新商店，如果更新商店本身，则广播它。