小编Chr*_*ine的帖子

Safari 在同一选项卡中触发 StorageEvent

我在 Safari(版本 13.1)中遇到一个奇怪的问题。

用例:我正在各种打开的选项卡之间同步数据。这是通过写入本地存储并侦听“存储”事件来实现的。

根据我的理解(和 MDN:https : //developer.mozilla.org/en-US/docs/Web/API/Window/storage_event),当某些内容写入本地存储并且满足两个条件时,应该触发存储事件:

  • 该项目的价值已更改
  • 此更改源自同一个域,但来自不同的文档(即其他选项卡/窗口)

换句话说:

  • 假设我有两个打开的选项卡(A 和 B)
  • 两者都侦听“存储”的变化
  • 其中一个选项卡 (A) 将一些内容写入本地存储
  • 只有另一个选项卡 (B)应接收“存储”事件

这在 Chrome、Firefox 和 Opera 中运行良好。但在 Safari 中,它也会在同一个选项卡中触发。

此代码将复制此内容(适用于控制台中的任何站点):

window.addEventListener('storage', event => console.log(event));
window.localStorage.setItem('foo', 'bar');
Run Code Online (Sandbox Code Playgroud)
  • 在 Chrome/Firefox/Opera 中,不会记录任何内容(预期行为)
  • 在 Safari 中,存储事件将记录在同一窗口中

此外,事件本身似乎没有足够的信息来识别哪个选项卡触发了它。我正在考虑为每个打开的选项卡编写另一个具有唯一键的助手,并将其写入本地存储并监听对其的更改。但在我这样做之前,我想看看我是否遗漏了什么。我知道有一些库可以向其他选项卡发送消息,但我不愿意为诸如此类的基本内容引入专用库。

问题:我错过了什么吗?有没有办法让 Safari 中的存储事件仅在从其他选项卡写入内容时触发?

html javascript safari dom-events

10
推荐指数
1
解决办法
944
查看次数

标签 统计

dom-events ×1

html ×1

javascript ×1

safari ×1