Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Speicherereignisses der JavaScript-Methode zur seitenübergreifenden Kommunikation

Detaillierte Erläuterung des Speicherereignisses der JavaScript-Methode zur seitenübergreifenden Kommunikation

黄舟Original: 2017-10-26 09:43:241362Durchsuche

Beim Schreiben einer Seite stößt man manchmal auf eine solche Anforderung, die die Übertragung von Daten oder einem Ereignis zwischen zwei Seiten erfordert. Zu diesem Zeitpunkt müssen Sie das Speicherereignis verwenden, über das ich heute sprechen werde. Bevor Sie dieses Ereignis lernen, müssen Sie die Verwendung von localStorage verstehen. Informationen zur spezifischen Verwendung finden Sie in anderen Dokumenten. Die Bedingungen zum Auslösen eines Speicherereignisses sind wie folgt:

Derselbe Browser öffnet zwei Seiten mit demselben Ursprung
Geändert in eine Webseite localStorage
Eine andere Webseite hat das storage-Ereignis registriert

　Das Speicherereignis ist nur auf derselben verfügbar Seite Es hat eine Wirkung, aber es hat keine Wirkung, wenn es aus verschiedenen Quellen kommt. Was ist also Homologie?

URL besteht aus Protokoll, Domänenname, Port und Pfad. Wenn Protokoll, Domänenname und Port zweier URLs identisch sind, bedeutet dies, dass sie denselben Ursprung haben. Zum Beispiel:

1  
2 //这个网址，协议是 
3 
4 //对比URL：
5 http://www.wszdaodao.cn/demo2/other.html     //同源
6 http://www.wszdaodao.cn:81/demo/index.html   //不同源
7 http://sxh.wszdaodao.cn/demo/index.html      //不同源
8 http://www.mamama.cn/demo/index.html         //不同源

Achten Sie daher beim Testen unbedingt darauf, dass es sich um die gleiche Quellseite handelt.

Das Folgende ist der Interaktionscode zwischen den beiden Seiten. Die Implementierung ist sehr einfach und kommuniziert zwischen SeiteA und SeiteB.

Seite A: Lokalen Speicher festlegen

<!DOCTYPE html>
<html>
<head>
<title>page A</title>
</head>
<body>
<button>click<button>
</body>
<script>
      document.querySelector(&#39;button&#39;).onclick = function(){
              localStorage.setItem(&#39;Num&#39;, Math.random()*10);
      }
</script>
</html>

Seite B: Auf Speicherereignisse achten

<!DOCTYPE html>
<html>
<head>
    <title>page B</title>
</head>
<body>
<script>
    window.addEventListener("storage", function (e) {
        console.log(e)
        console.log(e.newValue)
    });
</script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Speicherereignisses der JavaScript-Methode zur seitenübergreifenden Kommunikation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js-Ausnahmebehandlung, versuche es, endlich eine Erklärung zu fangenNächster Artikel：js-Ausnahmebehandlung, versuche es, endlich eine Erklärung zu fangen

In Verbindung stehende Artikel

Mehr sehen