代码之家 › 专栏 › 技术社区 › 0leg

角度,存储事件永远不会被触发[复制]

angular javascript

0leg · 技术社区 · 6 年前

$(function () {

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

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

});

我已经试过了,但没有显示警报。

更新 :它在Firefox 3.6中工作,但在Chrome 8或ie8中不工作,所以问题应该是更多的“如何在所有浏览器中使用jQuery绑定到本地存储更改事件?”

0 回复 | 直到 14 年前

Community CDub 7 年前

事实证明这是正确的,我误解了 the specification

当对与本地存储区域关联的存储对象x调用setItem()、removeItem()和clear()方法时,如果这些方法执行了某些操作,则在其窗口对象的local Storage属性的存储对象与除x以外的同一存储区域关联的每个文档对象中,都必须触发存储事件

换句话说,在每个窗口/选项卡上都会触发一个存储事件除了对于更新了 localStorage

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

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

SFin Flimm 6 年前

下面是如何在JQuery中执行此操作:

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

访问 e.key e.originalEvent.key .

有些浏览器只向其他选项卡发送存储通知,有些则不发送。(Firefox将向自己的选项卡发送存储事件,但是 key

kmoney12 8 年前

需要注意的一点是,事件处理程序只在 .setItem 事实上 变化。我一直在想办法让它工作,直到我意识到你不能一直用同样的值运行setItem。

我在Chrome版本54.0.2840.71M上

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

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)

Mac 7 年前

localDataStorage 在同一窗口/选项卡中,每当键值发生更改(如set或remove方法所做的更改)时,为您触发事件。您还可以使用它透明地设置/获取以下任何“类型”:数组、布尔值、日期、浮点值、整数、空值、对象或字符串。

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

一旦您实例化了该实用程序,下面的代码片段将允许您监视事件(在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
);