Partage des valeurs de sessionStorage entre les onglets du navigateur
Lors du stockage des valeurs de session du navigateur pour un site Web, sessionStorage est souvent utilisé pour conserver les données jusqu'à ce que le navigateur soit fermé. Cependant, ces valeurs sont isolées dans des onglets individuels, ce qui rend difficile le partage de données sur plusieurs onglets.
Comprendre le problème
Imaginez stocker des valeurs importantes dans sessionStorage, avec l'intention de rendez-les accessibles dans tous les onglets ouverts. Cependant, si un utilisateur ouvre un nouvel onglet et accède à une autre page, les valeurs sessionStorage de l'onglet précédent ne seront pas disponibles dans ce nouvel onglet. Cela peut devenir un problème lorsque vous souhaitez garantir une disponibilité cohérente des données dans toutes les instances de navigateur actives.
Solution : exploiter localStorage et les écouteurs d'événements
Pour partager les valeurs de sessionStorage entre les onglets , vous pouvez utiliser localStorage et exploiter son écouteur d'événements « stockage » pour propager les modifications de données entre les onglets. Ce code doit être implémenté dans tous les onglets actifs et exécuté avant les autres scripts :
<code class="javascript">// Transfer sessionStorage data between tabs var sessionStorage_transfer = function(event) { if (!event || !event.newValue) return; if (event.key == 'getSessionStorage') { // Send sessionStorage data to other tabs localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage)); localStorage.removeItem('sessionStorage'); } else if (event.key == 'sessionStorage' && !sessionStorage.length) { // Receive sessionStorage data from other tabs var data = JSON.parse(event.newValue); for (var key in data) { sessionStorage.setItem(key, data[key]); } } }; // Listen for changes to localStorage window.addEventListener("storage", sessionStorage_transfer, false); // Trigger the event to request sessionStorage data from other tabs if (!sessionStorage.length) { localStorage.setItem('getSessionStorage', 'foobar'); localStorage.removeItem('getSessionStorage', 'foobar'); };</code>
Comment ça marche
Ce code établit un canal de communication entre les onglets en utilisant localStorage. L'écouteur d'événement surveille les modifications apportées à localStorage et prend les actions appropriées en fonction du déclencheur d'événement. Lorsqu'un onglet demande des données de sessionStorage (en définissant « getSessionStorage » dans localStorage), d'autres onglets répondent en envoyant leur propre contenu de sessionStorage. L'onglet de réception met ensuite à jour son propre sessionStorage avec les données reçues, partageant ainsi efficacement les valeurs entre les onglets.
Compatibilité des navigateurs
Cette solution a été testée et est compatible avec les principaux navigateurs. , y compris Chrome, Firefox, Safari et Internet Explorer 9 et versions ultérieures. Notez qu'IE8 peut nécessiter une interface JSON pour bénéficier de toutes les fonctionnalités.
Conclusion
En tirant parti de localStorage et des écouteurs d'événements, vous pouvez facilement partager les valeurs de sessionStorage entre les onglets du navigateur, garantissant ainsi la cohérence disponibilité des données sur plusieurs instances de votre application. Cette technique est particulièrement utile pour conserver les données de session utilisateur ou stocker des valeurs importantes qui doivent être accessibles dans toutes les fenêtres actives du navigateur.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!