sessionStorage更改不會觸發'存儲'事件

Question

我跟隨this here查看是否可以在我的網站的所有打開的網頁上啓用更新，如果某人打開了多個選項卡。

基本上，我設置的監聽器和檢查，看看是否「車」鍵改爲

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

但是當我使用的，而不是localStorage的sessionStorage的它並不：

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

'storage'事件是否只針對localStorage而不是sessionStorage觸發？

僅在鉻上進行測試。

Answer 1

sessionStorage對於每個選項卡都是隔離的，因此它們無法通信。 sessionStorage的事件僅在相同選項卡上的兩個幀之間觸發。

這些codepens提供了一個很好的例子

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

}); 

你會發現當您按下「寫入本地」按鈕時，在iframe和打開的選項卡中都會捕獲事件，但是當您按下「Session writ e「只有嵌入式iframe捕獲事件。