Beispielcode zum Implementieren der Kommunikation zwischen Seiten mithilfe von Speicherereignissen

Wir alle wissen, dass die folgenden zwei Bedingungen erfüllt sein müssen, um window.onstorage auszulösen:

• Speichern (aktualisieren) Sie einen Speicher über localStorage.setItem oder sessionStorage.setItem
• Beim Speichern (Aktualisieren) dieses Speichers muss sich sein neuer Wert vom vorherigen Wert unterscheiden

Die zweite Bedingung oben ist, vereinfacht gesagt, entweder die Initialisierung des Speichers, da der Speicher nicht vorhanden ist und sein Wert null ist, oder es handelt sich um die Aktualisierung des vorhandenen Speichers.

Beispiel:

 // storagewindow.localStorage.setItem('a', 123) initialisieren; // Onstorage-Ereignis registrieren window.onstorage = (e) => { console.log(e);} // storagewindow.localStorage.setItem(' a', 123);

Die letzte Codezeile oben löst das Onstorage-Ereignis nicht aus, da sich der Wert von a nicht geändert hat. Er beträgt vorher und nachher 123, sodass der Browser feststellt, dass dieses Update ungültig ist.

Da das Onstorage-Ereignis vom Browser ausgelöst wird, wenn wir mehrere Seiten unter demselben Domänennamen öffnen und die Methode window.localStorage.setItem auf einer davon ausführen (wir müssen auch sicherstellen, dass das zweite am Anfang des Artikels erwähnte Element vorhanden ist). Wenn die Bedingung erfüllt ist), werden die Onstorage-Ereignisrückrufe auf diesen Seiten ausgeführt, wenn andere Seiten das Onstorage-Ereignis abhören.

Beispiel:

 // http://www.example.com/a.html<script>// Onstorage-Ereignis registrieren window.onstorage = (e) => { console.log(e);};</script> 

 // http://www.example.com/b.html<script>// Onstorage-Ereignis registrieren window.onstorage = (e) => { console.log(e);};</script> 

 // http://www.example.com/c.html<script>// Onstorage-Ereignis auslösen window.localStorage.setItem('a', new Date().getTime());</script>

Solange sichergestellt ist, dass Seite c nach den Seiten a und b geöffnet wird (auch wenn sich die drei Seiten nicht im selben Browserfenster befinden, müssen Sie den Unterschied zwischen dem Fenster und der Registerkartenseite unterscheiden), werden die Onstorage-Ereignisse in Seiten angezeigt a und b werden ausgelöst.

Nachdem wir nun wissen, wie Speicherereignisse zur Kommunikation zwischen Seiten verwendet werden können, welchen Nutzen hat diese Kommunikation für uns?

Tatsächlich müssen wir nur wissen, welcher Speicheraktualisierungsvorgang das Onstorage-Ereignis ausgelöst hat. Der Onstorage-Ereignisrückruf erhält wie andere Ereignisrückruffunktionen auch einen Ereignisobjektparameter. Es gibt drei nützliche Eigenschaften in diesem Objekt:

• Schlüssel Der Schlüsselname des Speichers, der initialisiert oder aktualisiert wird
• oldValue ist der Wert vor der Initialisierung oder Aktualisierung des Speichers.
• newValue ist der Wert nach dem initialisierten oder aktualisierten Speicher

Durch die Kombination dieser drei Schlüsselattribute können wir eine Datensynchronisierung zwischen Seiten erreichen

Lassen Sie mich abschließend den Unterschied zwischen localStorage und sessionStorage erwähnen

Für die in localStorage gespeicherten Daten gibt es keine Ablaufzeiteinstellung, und die in sessionStorage gespeicherten Daten werden gelöscht, wenn die Seitensitzung endet.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.