Comment partager des données entre les onglets du navigateur à l'aide de sessionStorage et des écouteurs d'événements ?

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' &amp;&amp; !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!