Wie Storage Event die Kommunikation zwischen Seiten implementiert

Der Inhalt, der in diesem Artikel mit Ihnen geteilt wird, handelt davon, wie Storage Event die Kommunikation zwischen Seiten implementiert. Der Inhalt ist von großem Referenzwert und ich hoffe, dass er Freunden in Not helfen kann.

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

1. Speichern (aktualisieren) Sie einen bestimmten Speicher über localStorage.setItem oder sessionStorage.setItem

2. Beim Speichern (Aktualisieren) dieses Speichers muss sich sein neuer Wert vom vorherigen Wert unterscheiden

Die zweite Bedingung oben, vereinfacht gesagt, ist: Entweder handelt es sich um die Initialisierung des Speichers, da der Speicher nicht vorhanden ist, oder es handelt sich um die Aktualisierung des vorhandenen Speichers

Zum Beispiel:

// 初始化storage
window.localStorage.setItem('a', 123);

// 注册onstorage事件
window.onstorage = (e) => {
  console.log(e);
};

// 更新storage
window.localStorage.setItem('a', 123);

Die letzte Zeile von Der obige Code löst kein Onstorage-Ereignis 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 öffnen mehrere Seiten unter demselben Domänennamen und führen die Methode window.localStorage.setItem auf jeder davon aus (stellen aber auch sicher, dass die zweite am Anfang des Artikels erwähnte Bedingung erfüllt ist), dann wenn Andere Seiten hören auf das Onstorage-Ereignis. Dann werden die Onstorage-Ereignisrückrufe auf diesen Seiten ausgeführt

Zum Beispiel:

// 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>

Solange die c-Seite nach den a- und b-Seiten geöffnet wird ( Auch wenn sich die drei Seiten nicht im selben Browserfenster befinden, benötigen Sie hier (Unterschied zwischen Fenstern und Registerkarten), dann werden die Onstorage-Ereignisse auf den Seiten a und b ausgelöst

Jetzt wissen wir, wie man es verwendet Speicherereignisse, um die Kommunikation zwischen Seiten zu erreichen. Was bedeutet diese Kommunikation für uns? Was ist der Zweck?
Tatsächlich müssen wir nur wissen, welcher Speicheraktualisierungsvorgang das Onstorage-Ereignis ausgelöst hat. Der Onstorage-Ereignisrückruf empfängt wie andere Ereignisrückruffunktionen auch einen Ereignisobjektparameter. Dieses Objekt enthält drei nützliche Attribute:

1. Schlüssel initialisiert oder aktualisiert Der Schlüsselname von storage

2. oldValue Der Wert, bevor der Speicher initialisiert oder aktualisiert wird

3. newValue Der Wert, nachdem der Speicher initialisiert oder aktualisiert wird

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

Abschließend erwähnen wir den Unterschied zwischen localStorage und sessionStorage

LocalStorage speichert Es gibt keine Einstellung für die Ablaufzeit für Daten, und die in sessionStorage gespeicherten Daten werden gelöscht, wenn die Seitensitzung endet

Verwandte Empfehlungen:

Android benutzerdefinierter kreisförmiger LoadingView-Effekt

Preisgekrönte nahtlose Scrolling-Animationsimplementierung für HTML5-Mobilterminals

Das obige ist der detaillierte Inhalt vonWie Storage Event die Kommunikation zwischen Seiten implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!