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 :
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 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 :
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
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!