ストレージイベント、JSページ間の通信方法の紹介-jsチュートリアル-php.cn

ストレージイベント、JSページ間の通信方法の紹介

一个新手

リリース： 2017-10-26 09:45:41

オリジナル

1589 人が閲覧しました

ページを書いていると、2つのページ間でデータやイベントを転送する必要があるという要件に遭遇することがあります。このとき、今日説明するストレージイベントを使用する必要があります。このイベントを学習する前に、localStorage の使用方法を理解する必要があります。具体的な使用方法については、他のドキュメントを参照してください。ストレージイベントをトリガーする条件は次のとおりです:

同じブラウザが同じオリジンを持つ 2 つのページを開く
localStorage が 1 つの Web ページで変更されるlocalStorage
另一网页注册了storage

もう 1 つの Web ページis registeredstorage イベント

storage イベントは同じソースページにのみ影響し、異なるソースには影響しません。では、相同性とは何でしょうか?

URL はプロトコル、ドメイン名、ポート、パスで構成されます。2 つの URL のプロトコル、ドメイン名、ポートが同じである場合、それらは同じ生成元であることを意味します。例:

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

ログイン後にコピー

したがって、テストするときは、必ず同じソースページであることを確認してください。

以下は、PageA と pageB の間で通信するインタラクションコードです。

ページ A: localStorage をセットアップする

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

ログイン後にコピー

ページ B: ストレージイベントをリッスンする

🎜🎜🎜

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

ログイン後にコピー

以上がストレージイベント、JSページ間の通信方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。