42

Attaching the event:

$(window).on("storage", function (e) {
   //callback not getting hit
});

Trying to fire the event:

localStorage.setItem("test", "123");

I have two tabs open, both listening to the storage event. I can see the localStorage getting updated correctly on both tabs. However when I change localStorage on one tab, the other never fires the event. Any ideas?

Tried on Chrome/Firefox. Domain format is https://www.xxx.yyy.zzz.

8 Answers 8

61

As others in the answers noted, the storage event only get picked up (by the listener) if the localStorage was changed in another browser's tab/window (of the same app), but not within the context of the current tab.

Detect storage changes in the current tab:

window.addEventListener('storage', console.log)

window.localStorage.setItem('test', '123')
window.dispatchEvent( new Event('storage') ) // <----- 

A manual storage event is dispatched.

This will effectively trigger the storage event listener twice on other tabs/windows (of the same app), but in certain situations this shouldn't be a problem.

1
  • 1
    Simply awesome :) Jun 1, 2022 at 11:48
54

StorageEvent is fired in different page with the same domain.

From MDN

The StorageEvent is fired whenever a change is made to the Storage object.

This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made。

9

An additional point to vsync's answer above is you can fire StorageEvent instead of Event and pass in an object so the fired event will match the browser default.

const oldValue = window.localStorage.getItem('test');
window.localStorage.setItem('test', newValue);
const event = new StorageEvent('storage', {
  key: 'test',
  oldValue,
  newValue,
  ...
});

window.dispatchEvent(event);
4

If even testing between different tabs/pages and still not seeing the event... I've found that the event will only fire if the key already exists.

It seems it's more like an onchange event.

Set a default value to the localStorage key, if even undefined and then test.

I'd call this a Chrome bug, as Firefox and Safari are firing correctly, but it is what it is.

1
  • 2022 i've up-voted and can confirm this, May 30, 2022 at 13:03
1

Problem was caused by document.domain overriding in code. After I removed the document.domain setter, events worked correctly.

Seems this is caused by a bug in Chrome.

https://bugs.chromium.org/p/chromium/issues/detail?id=136356&q=label%3AOWP-Standards-Compatibility&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified

2
  • 1
    After I removed the offending line, events worked correctly. which offending line did you removed? Mar 9, 2016 at 5:13
  • I rephrased the answer, is it more clear now? I had document.domain = xyz.com on a page with host abc.xyz.com. Mar 9, 2016 at 8:00
0
window.addEventListener('storage', function (e) {
      console.log("storage event occured here");
},false);

Storage Listner get called in other tabs , other than source tab. Just add debugger to other tabs.

0

You could always use a utility like localDataStorage to fire the events for you, in the same window/tab, whenever a key value changes, such as those made by the set or remove methods. You can also use it to transparently set/get any of the following "types": Array, Boolean, Date, Float, Integer, Null, Object or String.

[DISCLAIMER] I am the author of the utility [/DISCLAIMER]

Once you instantiate the utility, the following snippet will allow you to monitor the events:

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
);
3
  • That is so unreadable. Could you post the original source code as well in that repo? I'm actually curious what your logic is.
    – yuyu5
    Jan 4, 2022 at 1:25
  • Point taken, and you're right. I've updated the repo with the source files. 👍
    – Mac
    Feb 12, 2022 at 5:31
  • 2
    was this downvoted for any other reason beyond being unreadable (which has since been fixed) Mar 3, 2022 at 2:03
0

I was trying to logout from other tabs if logged out from one tab. The problem I faced was setting the same value over and over.

Thats why the Storage event not fired in other tabs. A simple hack was to add a salt/random stuff everytime to emit the event.

 window.localStorage.setItem('logout-event',Math.random().toString())

Then the events are available in other tabs! A better way to handle events from other tabs is to use BroadcastChannel

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.