存储事件未触发

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

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

来自MDN

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

这不适用于进行更改的同一页面 - 它实际上是域中其他页面使用存储同步任何更改的方式。

Answer 2

问题是由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 3

你尝试过这个简单的example吗？

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

Answer 4

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

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

Answer 5

您可以随时使用像localDataStorage这样的实用程序，在相同的窗口/选项卡中，每当键值发生更改时（例如set或remove方法所做的那些操作）为您触发事件。您还可以使用它透明地设置/获取以下任何“类型”：Array，Boolean，Date，Float，Integer，Null，Object或String。

[免责声明]我是该实用程序的作者[/ 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
);