Beispielcode zum Implementieren der Kommunikation zwischen Seiten mithilfe von Speicherereignissen

In diesem Artikel werden hauptsächlich relevante Informationen zum Beispielcode für die Verwendung von Storage Event zur Realisierung der Kommunikation zwischen Seiten vorgestellt. Ich hoffe, dass er für Sie hilfreich ist.

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

• Speichern (aktualisieren) Sie einen bestimmten 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, 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 mit demselben Domänennamen unter der Seite und führen die Methode window.localStorage.setItem auf einer der Seiten aus (stellen Sie außerdem sicher, dass die zweite am Anfang des Artikels erwähnte Bedingung erfüllt ist), wenn andere Seiten zuhören Zum Onstorage-Ereignis werden alle Onstorage-Ereignisrückrufe auf diesen Seiten ausgeführt

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(&#39;a&#39;, new Date().getTime());
</script>

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

Jetzt wissen wir, wie wir Speicherereignisse verwenden, um dies zu erreichen Kommunikation zwischen Seiten, 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 empfängt wie andere Ereignisrückruffunktionen auch einen Ereignisobjektparameter. Dieses Objekt enthält drei nützliche Attribute:

• Schlüssel initialisiert oder aktualisiert Der Schlüsselname von storage

• oldValue Der Wert, bevor der Speicher initialisiert oder aktualisiert wird

• 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

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter Html5-Video-Tutorial!

Verwandte Empfehlungen:

PHP-Video-Tutorial zum Gemeinwohltraining

HTML5-Grafik-Tutorial

HTML5 Online-Handbuch

Das obige ist der detaillierte Inhalt vonBeispielcode zum Implementieren der Kommunikation zwischen Seiten mithilfe von Speicherereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!