如何为所有浏览器使用jQuery绑定到localStorage更改事件？

如何使用jQuery将函数绑定到HTML5 localStorage更改事件

$(function () {

  $(window).bind('storage', function (e) {
    alert('storage changed');
  });

  localStorage.setItem('a', 'test');

});

我已尝试了上述操作，但未显示警报

---

更新：它在Firefox 3.6中工作，但在Chrome 8或IE 8中不工作，因此问题应该更多地是“如何使用jQuery为所有浏览器绑定本地存储更改事件？”

事实证明，这实际上工作正常，我误解了

当对与本地存储区域关联的存储对象x调用setItem（）、removeItem（）和clear（）方法时，如果这些方法执行了某些操作，则在其窗口对象的localStorage属性的存储对象与同一存储区域（而非x）关联的每个文档对象中，必须触发存储事件

换句话说，除了更新

localStorage

对象并引发事件的窗口外，存储事件将在每个窗口/选项卡上激发

因此事件没有被触发，因为我只打开了一个窗口/选项卡。如果我将上述代码放在一个页面中，并在两个选项卡中打开该页面，我将看到在第二个选项卡中触发的事件

---

包含更多详细信息。

以下是如何在JQuery中执行此操作：

 $(window).bind('storage', function (e) {
     console.log(e.originalEvent.key, e.originalEvent.newValue);
 });

直接访问

e.key

不起作用。您需要使用

e.originalEvent.key

---

有些浏览器只向其他选项卡发送存储通知，有些则不会。（Firefox会将存储事件发送到它自己的选项卡，但是将

键设置为null，这看起来像是）。
需要提到的一点是，只有当项目实际发生更改时，才会在
.setItem
上调用事件处理程序。为了让它正常工作，我费了好大劲，直到我意识到不能用相同的值继续运行setItem

我使用的是Chrome版本54.0.2840.71 m

这是一个测试（在两个浏览器选项卡中打开）

每当键值发生更改（例如set或remove方法所做的更改）时，您始终可以在同一窗口/选项卡中使用类似的实用程序为您触发事件。您还可以使用它透明地设置/获取以下任何“类型”：数组、布尔值、日期、浮点值、整数、Null、对象或字符串

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

实例化该实用程序后，以下代码段将允许您监视事件（在vanilla JS中，因为已经给出了jQuery示例）：

对我来说很好。您可能应该添加一点功能检测<代码>如果（！localStorage in window）警报（'foobar'）

@jAndy你在使用safari吗，我也测试了他的解决方案，但同样的结果，我认为它可能不受支持这在Firefox中对我有用，但在Chrome中不可用。事实上，我也无法让Chrome与

addEventListener

一起工作。是的，你可能必须创建一个非常奇怪的包装器。铬不起作用了？我知道这是过去的事。Firefox对规范的实现（在3.6中）是不正确的，因为它在更新localStorageFirefox的窗口中触发了事件。Firefox似乎已经纠正了问题，但是IE9和IE10仍然没有遵循规范。他们在所有窗口/选项卡中触发事件，包括引发更改的窗口/选项卡。我在这里向Microsoft提出了这个错误（不幸需要登录）：谢谢！我已经疯狂了两天，想知道为什么我的本地存储在我眼前更新了两次，而我什么都没做。。。我打开了另一个窗口，另一个登录的用户正在存储不同的数据。当然，由于本地存储在域之间共享，这就是原因！感谢所有浏览器支持的AgainAdeventListener（）Firefox修复了该漏洞，其工作方式与Chrome相同，但IE 11仍然存在漏洞，因此它在自己的选项卡中触发事件。。。

if (window.addEventListener)
            addEventListener('storage', storage_event, false);
        else if (window.attachEvent)
            attachEvent('onstorage', storage_event, false);
        function storage_event(e) {
            console.log("Time is now "+ e.newValue);
        }

        setInterval(function () {
            var time=new Date().getTime();
            localStorage.setItem("time", time);
            console.log("Setting time to "+time);
        }, 1000)

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
);