Detaillierte Erläuterung des Speicherereignisses der JavaScript-Methode zur seitenübergreifenden Kommunikation-js-Tutorial-php.cn

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

黄舟

Freigeben： 2017-10-26 09:43:24

Original

1404 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:

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

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