Safari 在同一选项卡中触发 StorageEvent

Question

我在 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');

• 在 Chrome/Firefox/Opera 中，不会记录任何内容（预期行为）
• 在 Safari 中，存储事件将记录在同一窗口中

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

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

Answer 1

这也发生在 IE11 上，如此处和此处所述。解决的办法是检查，您的当前标签是否清晰对焦，描述在这里。

所以，在你的代码中：

function handler (event) {
  if (!document.hasFocus()) {
    // continue with your logic
  }
}
window.addEventListener('storage', handler);

我还建议处理 IE 问题，以防您的应用程序需要它，如上述答案中所述。您可以通过检测浏览器并增强上述逻辑来做到这一点。