CODEWITHSUNDEEP
jquerylocal-storagepnotify
GGio
GGio

Reputation: 7653

Listen to localStorage.removeItem() event only

I am displaying notifications to users using pnotify plugin. However I want to remove notification on all tabs if user closes notification in 1 tab by clicking X icon.

I use localstorage for this, each time a new notification is shown to the user, it gets added to the localStorage. When user presses X icon, I do localStorage.removeItem(key). How do I listen to this event to close the notification in all tabs?

My listener is below:

$(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();
    }
});

I noticed that newValue turns into null if it was removed, in theory this would work (have not tested yet), but is it reliable in terms of will it always return null if removeItem was called on that item? What if the item value changes to null, it will then trigger that event since the value changed right?

Upvotes: 6

Views: 3277

Answers (2)

guest271314
guest271314

Reputation: 1

$(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]); 
}

Upvotes: 2

user247702
user247702

Reputation: 24212

Local Storage stores everything as a string.

localStorage.setItem("foo", null);

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

And indeed, newValue is null when it's removed. MDN: StorageEvent says:

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.

Therefore, it is safe to check for null by using === null.

Upvotes: 5

Related Questions