sessionStorage les modifications ne déclenchent pas l'événement 'storage'

Question

Je suivais this here pour voir si je pouvais activer les mises à jour sur toutes les pages Web ouvertes de mon site si quelqu'un avait plusieurs onglets ouverts.

Fondamentalement, je mets l'auditeur et vérifier pour voir si le « panier » clé a été changé

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

Quand je change localStorage.cart d'un autre onglet sur le même site, l'événement se déclenche très bien dans le premier onglet:

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

Mais quand je l'utilise sessionStorage au lieu de localStorage il n'a pas:

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

L'événement 'storage' se déclenche-t-il uniquement pour localStorage et non pour sessionStorage?

Testé sur le chrome uniquement.

Answer 1

Le sessionStorage est isolé pour chaque onglet, ils ne peuvent donc pas communiquer. Les événements de sessionStorage sont déclenchés uniquement entre les cadres sur le même onglet.

Ces codepens fournissent un bon exemple

Storage Writer écrit au stockage

function writeSession() 

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

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

Storage Reader écoutes pour l'événement de stockage (garder cette ouverture dans une autre onglet.)

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

}); 

Vous remarquerez que lorsque vous appuyez sur le bouton "Write local", à la fois dans l'onglet iframe et dans l'onglet ouvert, l'événement est capturé, mais lorsque vous appuyez sur le bouton "Session writ e "seul l'iframe incorporé capture l'événement.