How do I bind event to sessionStorage?

Question

I can successfully bind an event for a change to localStorage (using jquery):

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

localStorage.setItem('someItem', 'someValue');

If I use sessionStorage, the event will NOT fire:

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

sessionStorage.setItem('someItem', 'someValue');

Why is this?

Allochthonous

I'm testing this in Chrome. It must work in Chrome, FF, and IE9+. I should also mention that I need the event to fire in another Tab/window (of the same browser). – Allochthonous

I don't see this event get fired at all in Chrome, using localStorage. – Faruq

Answer 1

That is the way it's meant to be I think. From the spec (emphasis added):

When the setItem(), removeItem(), and clear() methods are called on a Storage object x that is associated with a session storage area, if the methods did something, then in every Document object whose Window object's sessionStorage attribute's Storage object is associated with the same storage area, other than x, a storage event must be fired

I think what that means is that the event will be fired in any other document sharing the session storage object, but not the document that caused the event to fire.

Update

Here's another very similar question which seems to agree with what I've mentioned above (the answer quotes the same paragraph from the spec).

Lottery

I want the event to fire in another tab/window ("other than x"). Does sessionStorage only apply to the current window/tab? – Allochthonous

No, it applies to the session. The event should fire in other tabs/windows, but it should not fire in the same document. – Lottery

is it possible to force the event to fire in the same window? – Bushel

Answer 2

The sessionStorage is isolated for each tab, so they can't communicate. Events for sessionStorage are triggered only in between frames on the same tab.

EDIT:

I've made the following example to illustrate the above statement:

http://codepen.io/surdu/pen/QGZGLO?editors=1010

The example page has two buttons that trigger a local and a session storage change.

It also embeds an iframe to another codepen that listens for storage events changes:

http://codepen.io/surdu/pen/GNYNrW?editors=1010 (you should keep this opened in a different tab.)

You will notice that when you press the "Write local" button, in both the iframe and the opened tab the event is captured, but when you press the "Write session" only the embedded iframe captures the event.

Velours

I concur with @NicolaeSurdu. I needed to track property updates via a StorageEvent across multiple tabs and sessionStorage didn't work. When I switched to using a localStorage instance the StorageEvent fired as expected. Properties stored via localStorage are persistent so you need to manually remove them from storage when you're done using them. – Thuggee

Answer 3

This question seems to be getting quite a few views, so I will just post this as extra info.

In case you want to respond exclusively to updates on the sessionStorage object, you can just ignore the events caused by localStorage:

$(window).on('storage',function(e){
   if(e.originalEvent.storageArea===sessionStorage){
     alert('change');
   } 
   // else, event is caused by an update to localStorage, ignore it
});

I hate jQuery, so will post a the native version as well:

window.addEventListener('storage',function(e){
   if(e.storageArea===sessionStorage){
     alert('change');
   } 
   // else, event is caused by an update to localStorage, ignore it
});

Tightwad

Just in case anyone is wondering why this isn't working. Its designed to work only when the user has more than 1 tab of the same domain open and not as you may think where it fires on the current tab. – Sectionalism

it doesn't work for just 1 tab? that's disaster for logic – Lux