仅收听 localStorage.removeItem() 事件

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，它是否总是 return null那个项目？如果项目值更改为 null，那么它会触发该事件，因为值已正确更改？

Answer 1

本地存储将所有内容存储为字符串。

localStorage.setItem("foo", null);

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

确实，newValue 被删除后就是 null。 MDN: StorageEvent 说：

The new value of the key. The newValue is null when the change has been invoked by storage clear() method or the key has been removed from the storage. Read only.

因此，使用 === 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() 事件

Listen to localStorage.removeItem() event only

jquery

local-storage

pnotify