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

Nous savons tous que les deux conditions suivantes doivent être remplies pour déclencher window.onstorage :

• Enregistrez (mettez à jour) un 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, en termes simples, est : soit l'initialisation du stockage, car le stockage n'existe pas, sa valeur est nulle, soit il s'agit de la mise à jour du stockage existant ;

Exemple:

 // Initialiser storagewindow.localStorage.setItem('a', 123); // Enregistrer l'événement de stockage window.onstorage = (e) => { console.log(e);}; // Mettre à jour storagewindow.localStorage.setItem(' a', 123);

La dernière ligne de code ci-dessus ne déclenche pas l'événement onstorage, car la valeur de a n'a pas changé, elle est 123 avant et après, le navigateur détermine donc 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 (il faut également s'assurer que le deuxième élément mentionné au début de l'article est remplie), alors si d'autres pages écoutent l'événement de stockage, les rappels d'événement de stockage dans ces pages seront exécutés.

Exemple:

 // http://www.example.com/a.html<script>// Enregistrer l'événement de stockage window.onstorage = (e) => { console.log(e);};</script> 

 // http://www.example.com/b.html<script>// Enregistrer l'événement de stockage window.onstorage = (e) => { console.log(e);};</script> 

 // http://www.example.com/c.html<script>// Déclencheur d'un événement de stockage window.localStorage.setItem('a', new Date().getTime());</script>

Tant que la page c est assurée d'être 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 faire la différence entre la fenêtre et la page à onglet), alors les événements de stockage dans les pages a et b seront déclenchés.

Maintenant que nous savons comment utiliser les événements de stockage pour réaliser une communication entre les pages, à quoi nous sert cette communication ?

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 les autres fonctions de rappel d'événement, reçoit également un paramètre d'objet d'événement. Il existe trois propriétés utiles dans cet objet :

• key Le nom de clé du stockage en cours d'initialisation ou de mise à jour
• oldValue est la valeur avant l'initialisation ou la mise à jour du stockage.
• newValue est la valeur après le stockage initialisé ou mis à jour

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

Enfin, permettez-moi de mentionner la différence entre localStorage et sessionStorage

Les données stockées dans localStorage n'ont pas de paramètre de délai d'expiration et les données stockées dans sessionStorage seront effacées à la fin de la session de page.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.