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

问题是由document.domain覆盖代码引起的。删除document.domain setter后，事件正常工作。

似乎这是由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%20Modified

Answer 2

如果即使在不同的标签/页面之间进行测试仍然看不到该事件，我发现该事件仅在键已经存在的情况下才会触发。

似乎更像是onchange事件。

为localStorage设置默认值，即使是undefined，然后进行测试。

我将其称为Chrome错误，因为Firefox和Safari能够正确触发，但这就是事实。

Answer 3

window.addEventListener('storage', function (e) {
      console.log("storage event occured here");
},false);

在源选项卡以外的其他选项卡中调用Storage Listner。只需将调试器添加到其他选项卡即可。

Answer 4

StorageEvent在具有相同域的不同页面中触发。

来自MDN

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

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

Answer 5

正如答案中其他人指出的那样，如果 localStorage 在另一个浏览器的标签/窗口（同一应用程序）中被更改，则storage事件仅由侦听器接收。，但不是在当前标签的上下文中。

在当前标签页中检测存储更改：

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

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

已调度手动storage事件。这将有效地触发（同一应用程序的）其他标签/窗口上的storage事件监听器两次，但是在某些情况下这不是问题。

Answer 6

您是否尝试过这种更简单的example

window.addEventListener('storage', function (e) {
   console.log("storage event occured");
});

Answer 7

您可以随时使用localDataStorage之类的实用程序在相同的窗口/选项卡中为您触发事件，只要键值发生更改，例如set或remove方法所做的更改。您还可以使用它透明地设置/获取以下任何＆＃34;类型＆＃34;：数组，布尔值，日期，浮点数，整数，空值，对象或字符串。

[免责声明]我是该实用程序的作者[/ DISCLAIMER]

实例化实用程序后，以下代码段将允许您监视事件：

function localStorageChangeEvents( e ) {
    console.log(
        "timestamp: "     + e.detail.timestamp + " (" + new Date( e.detail.timestamp ) + ")" + "\n" +
        "key: "           + e.detail.key     + "\n" +
        "old value: "     + e.detail.oldval  + "\n" +
        "new value: "     + e.detail.newval  + "\n"
    );
};
document.addEventListener(
    "localDataStorage"
    , localStorageChangeEvents
    , false
);

存储事件未触发

7 个答案:

在当前标签页中检测存储更改：