sessionStorage 更改不会触发“存储”事件

Question

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

基本上，我设置了侦听器并检查“购物车”键是否已更改

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

'storage' 事件是否只为 localStorage 而不是 sessionStorage 触发？

仅在 chrome 上测试。

Answer 1

每个选项卡的 sessionStorage 都是隔离的，因此它们无法通信。sessionStorage 的事件仅在同一选项卡上的帧之间触发。

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

存储写入器写入存储

function writeSession()

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

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

存储读取器侦听存储事件（在不同的选项卡中保持打开状态。）

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

});

您会注意到，当您按下“Write local”按钮时，iframe 和打开的选项卡中都会捕获事件，但当您按下“Session write”时，只有嵌入式 iframe 捕获事件。