Maison > interface Web > Tutoriel H5 > le corps du texte

Comment Storage Event implémente la communication entre les pages

不言
Libérer: 2018-07-24 09:58:20
original
2595 Les gens l'ont consulté

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);
Copier après la connexion

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>
Copier après la connexion
// http://www.example.com/b.html
<script>
// 注册onstorage事件
window.onstorage = (e) => {
  console.log(e);
};
</script>
Copier après la connexion
// http://www.example.com/c.html
<script>
// 触发onstorage事件
window.localStorage.setItem('a', new Date().getTime());
</script>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal