如何使用 Svelte Store 更新选项卡之间的数据

Question

我正在 Svelte 中创建一个 Store，它订阅值更改并将值存储在 localStorage 上。

打开页面时，有一个输入标签，其值绑定到商店。一切都按预期进行，刷新后最后一个值就在那里。

我的问题以及我不知道如何实现的内容（如果可能的话）打开同一页面的第二个选项卡，当我输入一个选项卡时，我想看到另一个选项卡上的值更新。

（我知道问题是第二个选项卡不知道 localStorage 更改）

我的黑客解决方案是间隔读取本地存储中的更新值，但这显然是一种黑客攻击，而不是解决方案。

我们该如何解决这样的事情呢？

Answer 1

有两种解决方案，具体取决于用例。

使用事件监听器

你可以在窗口上注册一个事件监听器来监听事件storage并检查你感兴趣的项目是否发生了变化：

window.addEventListener('storage', event => {
  if (event.key == 'DATA') {
    // do something with the newly updated store
  }
})

这是一个比较棘手的问题，适合您不希望数据实际持久存在的用例（即：如果用户关闭所有选项卡，数据将重置为默认值）。