Comment Storage Event implémente la communication entre les pages

Le contenu partagé avec vous dans cet article concerne la façon dont Storage Event implémente la communication entre les pages. Le contenu a une grande valeur de référence et j'espère qu'il pourra aider les amis dans le besoin.

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

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

2. 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 des pages (assurez-vous également que la deuxième condition mentionnée au début de l'article est remplie ), alors si d'autres pages surveillent l'événement de stockage, alors les rappels d'événement de stockage dans ces pages 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('a', new Date().getTime());
</script>

Tant que la page c est ouvert après la page a et la page b (même trois Les pages ne sont pas dans la même fenêtre du navigateur. Ici, vous devez distinguer la différence entre la fenêtre et la page à onglet), puis les événements de stockage dans les pages a et b seront déclenchés

Maintenant, nous savons déjà comment utiliser l'événement de stockage pour réaliser la connexion entre les pages de communication, alors à 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 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 :

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

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

3. 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

Recommandations associées :

Effet LoadingView circulaire personnalisé Android

Implémentation d'une animation de défilement transparente primée sur un terminal mobile HTML5

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!