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

Question

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

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

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

（我知道问题是第二个选项卡不知道 localStorage 的变化）

我的 hack 解决方案是间隔读取 localStorage 的更新值，但这显然是 hack 而不是解决方案。

我们如何解决这样的问题？

Answer 1

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

使用事件侦听器

您可以在 window 上注册一个事件侦听器来侦听 storage 事件并检查您感兴趣的项目是否已更改。:

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

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