Question

我正在使用pnotify插件向用户显示通知。但是，如果用户通过单击X图标在1个选项卡中关闭通知，我想删除所有选项卡上的通知。

我为此使用localstorage，每次向用户显示新通知时，都会将其添加到localStorage。当用户按下X图标时，我会localStorage.removeItem(key)。如何收听此事件以关闭所有标签中的通知？

我的听众如下：

$(window).bind('storage', function(e) {
    // if it was removed
    if (e.originalEvent.newValue == null) {
        var notificationObject = e.originalEvent.oldValue;

        // call remove function on pnotify object
        notificationObject.remove();
    }
});

我注意到newValue如果被删除就会变为null，理论上这可行（尚未测试），但是如果在该项上调用removeItem，它是否总是会返回null？如果项目值更改为null，那么它将触发该事件，因为值已更改为正确？

Answer 1

Local Storage将所有内容存储为字符串。

localStorage.setItem("foo", null);

// returns "null"
localStorage.getItem("foo");

事实上，newValue在被删除时为null。 MDN: StorageEvent说：

密钥的新值。当存储newValue方法调用更改或已从存储中删除null时，clear()为key。只读。

因此，使用null检查=== null是安全的。

Answer 2

$(window).on("itemRemoved", function(e, args) {
  console.log(e, args);
  if (!localStorage.getItem(args)) {
    // do stuff
  }
})

fn = localStorage.removeItem; 
localStorage.removeItem = function() { 
  var args = arguments; 
  setTimeout(function() {
    $(window).trigger("itemRemoved", [args[0]])
  }); 
 return fn.call(localStorage, args[0]); 
}

仅侦听localStorage.removeItem（）事件

2 个答案: