时间戳

首页 > 解决方案 > Svelte 中无关组件之间的实时数据共享

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

问题描述

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

标签： sveltesvelte-3svelte-component

解决方案

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

使用本地存储

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

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

如果您希望数据在用户浏览离开的情况下仍然存在，这可以正常工作。

广播频道 API

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

这里的概念是一样的：监听频道的变化并更新商店，如果你更新商店本身，就广播它。

推荐阅读