Heim > Artikel > Web-Frontend > Einführung in Speicherereignisse und Kommunikationsmethoden zwischen JS-Seiten

Einführung in Speicherereignisse und Kommunikationsmethoden zwischen JS-Seiten

一个新手Original: 2017-10-26 09:45:411538Durchsuche

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:

http://www.wszdaodao.cn/demo/index.html
//这个网址，协议是http://域名是www.wszdaodao.cn，端口是80（默认端口可以省略）

//对比URL：
http://www.wszdaodao.cn/demo2/other.html     //同源
http://www.wszdaodao.cn:81/demo/index.html   //不同源
http://sxh.wszdaodao.cn/demo/index.html      //不同源
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 vonEinführung in Speicherereignisse und Kommunikationsmethoden zwischen JS-Seiten. 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：Detaillierte Erläuterung des Speicherereignisses der JavaScript-Methode zur seitenübergreifenden KommunikationNächster Artikel：Detaillierte Erläuterung des Speicherereignisses der JavaScript-Methode zur seitenübergreifenden Kommunikation

In Verbindung stehende Artikel

Mehr sehen