Einführung in Speicherereignisse und Kommunikationsmethoden zwischen JS-Seiten-js-Tutorial-php.cn

Einführung in Speicherereignisse und Kommunikationsmethoden zwischen JS-Seiten

一个新手

Freigeben： 2017-10-26 09:45:41

Original

1528 Leute haben es durchsucht

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         //不同源

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!