Question

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

$(function () {

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

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

});

我已尝试过上述内容，但警报未显示。

更新：它适用于Firefox 3.6，但它在Chrome 8或IE 8中不起作用，所以问题应该是“如何使用jQuery为所有浏览器绑定到localStorage更改事件？”

Answer 1

事实证明这实际上是正常的，我误解了the specification

当在与本地存储区域相关联的存储对象x上调用setItem（），removeItem（）和clear（）方法时，如果方法执行了某些操作，则在每个Document对象的Window对象的localStorage属性中存储对象与x相同的存储区域相关联，必须触发存储事件

换句话说，对于更新localStorage对象并导致事件的窗口/选项卡（除外）会触发存储事件。

所以事件没有被解雇，因为我只打开了一个窗口/标签。如果我将上面的代码放在一个页面中并在两个选项卡中打开页面，我会在第二个选项卡中看到该事件。

This answer on the problem 包含更多详细信息。

Answer 2

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

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

直接访问e.key不起作用。您需要使用e.originalEvent.key。

某些浏览器只会向其他标签发送存储通知，而有些浏览器则不会。（Firefox会将存储事件发送到自己的选项卡，但key设置为null，似乎就好了。

Answer 3

有一点需要提及的是，如果项目实际发生更改，则仅在.setItem上调用事件处理程序。我试图让我的头发工作，直到我意识到你不能继续运行具有相同值的setItem。

我使用的是Chrome版本54.0.2840.71 m

这是一个测试（在两个浏览器标签中打开）。

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)

Answer 4

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

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

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

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

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

4 个答案: