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

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

事实证明,这实际上是正常的,我误解了规范

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

换句话说,除了更新localStorage对象并导致事件的窗口/选项卡之外,每个窗口/选项卡都会触发一个存储事件.

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

关于该问题的答案包含更多细节.

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米

这是一个测试(在两个浏览器选项卡中打开).

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)