Exemple de code pour implémenter la communication entre les pages à l'aide d'événements de stockage

Cet article présente principalement les informations pertinentes sur l'exemple de code d'utilisation de Storage Event pour réaliser la communication entre les pages. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Nous savons tous que le déclenchement de window.onstorage doit remplir les deux conditions suivantes :

• Enregistrer (mettre à jour) un certain stockage via localStorage.setItem ou sessionStorage.setItem

• Lors de la sauvegarde (mise à jour) de ce stockage, sa nouvelle valeur doit être différente de la valeur précédente

La deuxième condition ci-dessus, pour faire simple, est : Soit c'est l'initialisation du stockage, car le stockage n'existe pas, sa valeur est nulle, soit c'est la mise à jour du stockage existant

Par exemple :

// 初始化storage
window.localStorage.setItem('a', 123);

// 注册onstorage事件
window.onstorage = (e) => {
  console.log(e);
};

// 更新storage
window.localStorage.setItem('a', 123);

La dernière ligne de le code ci-dessus ne le fait pas. L'événement onstorage sera déclenché, car la valeur de a n'a pas changé, elle est 123 avant et après, donc le navigateur détermine que cette mise à jour n'est pas valide

Puisque l'événement onstorage est déclenché par le navigateur, si nous ouvrons plusieurs pages sous le même nom de domaine et exécutons la méthode window.localStorage.setItem sur l'une d'entre elles (assurez-vous également que la deuxième condition mentionnée au début de l'article est remplie), alors si d'autres pages écoutent à l'événement onstorage, puis dans ces pages Les rappels de l'événement onstorage seront exécutés

Exemple :

// http://www.example.com/a.html
<script>
// 注册onstorage事件
window.onstorage = (e) => {
  console.log(e);
};
</script>

// http://www.example.com/b.html
<script>
// 注册onstorage事件
window.onstorage = (e) => {
  console.log(e);
};
</script>

// http://www.example.com/c.html
<script>
// 触发onstorage事件
window.localStorage.setItem(&#39;a&#39;, new Date().getTime());
</script>

Tant que la page c est ouverte après les pages a et b (même si les trois pages ne sont pas dans la même fenêtre du navigateur, il faut ici distinguer la différence entre les fenêtres et les pages à onglet), alors les événements de stockage dans les pages a et b seront déclenchés

Maintenant, nous avons déjà savoir utiliser les événements de stockage pour réaliser une communication entre les pages, alors cette communication A quoi nous sert-elle ?

En fait, nous avons seulement besoin de savoir quelle opération de mise à jour du stockage a déclenché l'événement de stockage. Alors, comment le savons-nous ? Le rappel d'événement onstorage, comme d'autres fonctions de rappel d'événement, reçoit également un paramètre d'objet d'événement. Il y a trois attributs utiles dans cet objet, qui sont :

• clé initialisée ou mise à jour Le nom de la clé de. storage

• oldValue La valeur avant l'initialisation ou la mise à jour du stockage

• newValue La valeur après l'initialisation ou la mise à jour du stockage

En combinant ces 3 attributs clés, nous pouvons réaliser une synchronisation des données entre les pages

Enfin, mentionnons la différence entre localStorage et sessionStorage

Magasins LocalStorage Il n'y a pas de réglage du délai d'expiration pour les données, et les données stockées dans sessionStorage seront effacées à la fin de la session de la page

Résumé : ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo HTML5 !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Tutoriel graphique HTML5

Manuel HTML5 en ligne

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!