存储事件未触发

Question

附加活动：

$(window).on("storage", function (e) {
   //callback not getting hit
});

尝试触发该事件：

localStorage.setItem("test", "123");

我打开了两个选项卡，两个选项卡都在监听存储事件。我可以在两个标签上看到localStorage得到正确的更新。但是，当我在一个选项卡上更改localStorage时，另一个不会触发该事件。有任何想法吗？

在Chrome / Firefox上尝试过。域格式为https://www.xxx.yyy.zzz。

Answer 1

正如答案中的其他人所指出的那样，storage只有在localStorage在另一个浏览器的选项卡/窗口（同一应用程序的）中更改时（而不是在当前选项卡的上下文中），才会（由侦听器）接收该事件。

检测当前选项卡中的存储更改：

window.addEventListener('storage', console.log)

window.localStorage.setItem('test', '123')
window.dispatchEvent( new Event('storage') ) // <----- 

storage分派手动事件。这将在（同一应用程序的）其他选项卡/窗口上有效地触发storage事件侦听器两次，但在某些情况下这不是问题。

Answer 2

上面 vsync 的答案的另一点是您可以触发StorageEvent而不是Event传入一个对象，以便触发的事件将与浏览器默认值匹配。

const oldValue = window.localStorage.getItem('test');
window.localStorage.setItem('test', newValue);
const event = new StorageEvent('storage', {
  key: 'test',
  oldValue,
  newValue,
  ...
});

window.dispatchEvent(event);

Answer 3

在同一域的不同页面中触发StorageEvent。

从MDN

只要对Storage对象进行更改，就会触发StorageEvent。

这将无法在进行更改的同一页面上进行，这实际上是域中其他页面使用存储来同步所做的任何更改的一种方式吗？

Answer 4

问题是由document.domain代码覆盖引起的。删除document.domain设置器后，事件正常运行。

看来这是由 Chrome 中的错误引起的。

https://bugs.chromium.org/p/chromium/issues/detail?id=136356&q=label%3AOWP-Standards-Compatibility&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS% 20修改