javascript - sessionStorage changes aren't firing 'storage' event - Stack Overflow

admin管理员组

文章数量:1348117

I was following this here to see if I could enable updates on all open webpages of my site if someone has multiple tabs open.

Basically, I set the listener and check to see if the cart key was changed

window.addEventListener('storage', function(e) {
  if (e.key === "cart") {
    console.log(`cart changed: ${e.newValue}`);
  }
});

When I change localStorage.cart from another tab on the same website, the event fires just fine in the first tab:

setInterval(function(){
    localStorage.cart = "localStorage 1";
    setTimeout(function(){
        localStorage.cart = "localStorage 2";
    },2000);
},4000);

But when I use sessionStorage instead of localStorage it doesn't:

setInterval(function(){
    sessionStorage.cart = "sessionStorage 1";
    setTimeout(function(){
        sessionStorage.cart = "sessionStorage 2";
    },2000);
},4000);

Does the storage event only fire for localStorage and not sessionStorage?

Tested on chrome only.

I was following this here to see if I could enable updates on all open webpages of my site if someone has multiple tabs open.

Basically, I set the listener and check to see if the cart key was changed

window.addEventListener('storage', function(e) {
  if (e.key === "cart") {
    console.log(`cart changed: ${e.newValue}`);
  }
});

When I change localStorage.cart from another tab on the same website, the event fires just fine in the first tab:

setInterval(function(){
    localStorage.cart = "localStorage 1";
    setTimeout(function(){
        localStorage.cart = "localStorage 2";
    },2000);
},4000);

But when I use sessionStorage instead of localStorage it doesn't:

setInterval(function(){
    sessionStorage.cart = "sessionStorage 1";
    setTimeout(function(){
        sessionStorage.cart = "sessionStorage 2";
    },2000);
},4000);

Does the storage event only fire for localStorage and not sessionStorage?

Tested on chrome only.

• javascript
• html

Share Improve this question Follow edited Aug 22, 2022 at 8:30 zhulien 5,71544 gold badges2424 silver badges3939 bronze badges asked Oct 13, 2017 at 16:37 TKoLTKoL 14k44 gold badges4848 silver badges8585 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

These codepens provide a good example

Storage Writer writes to storage

function writeSession()

    {
      sessionStorage.setItem("test", Math.random());
    }

    function writeLocal()
    {
      localStorage.setItem("test", Math.random());
    } 

Storage Reader listens for storage event (keep this open in a different tab.)

window.addEventListener('storage', function(e) {  

  if(e.storageArea===sessionStorage) {
    $("#output").append('Session storage change <br>');   
  }

  if(e.storageArea===localStorage) {
    $("#output").append('Local storage change <br>');   
  }

});

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 "Session write" only the embedded iframe captures the event.

本文标签： javascriptsessionStorage changes aren39t firing 39storage39 eventStack Overflow