Question

我正在关注this here，看看是否可以在我的网站的所有打开的网页上启用更新，如果有人打开了多个标签页。

基本上，我设置了听众，并检查“＆＃39; cart＆＃39;密钥已更改

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

当我从同一网站上的另一个标签更改localStorage.cart时，事件会在第一个标签中触发：

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

但是当我使用sessionStorage而不是localStorage时，它并没有：

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

＆＃39;存储＆＃39; event只能为localStorage而不是sessionStorage？

仅在镀铬时测试。

Answer 1

每个标签都会隔离sessionStorage，因此无法进行通信。 sessionStorage的事件仅在同一选项卡上的帧之间触发。

这些代码提供了一个很好的例子

Storage Writer写入存储空间

function writeSession()

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

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

Storage Reader侦听存储事件（在另一个标签中保持打开状态。）

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>');   
  }

});

当您按下＆＃34;写本地＆＃34;时，您会注意到按钮，在iframe和打开的选项卡中捕获事件，但是当您按下＆＃34;会话时写入＆＃34;只有嵌入式iframe才能捕获事件。

sessionStorage更改不会触发＆＃39;存储＆＃39;事件

1 个答案: