ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptのページ間通信メソッドのストレージイベントの詳細説明

JavaScriptのページ間通信メソッドのストレージイベントの詳細説明

黄舟
黄舟オリジナル
2017-10-26 09:43:241405ブラウズ

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

  1. 同じブラウザーが同じオリジンを持つ 2 つのページを開きます

  2. localStorage が一方の Web ページで変更されますlocalStorage

  3. 另一网页注册了storage

もう一方の Web ページis registeredstorage イベント

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

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

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

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

以下は、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>

🎜🎜🎜

以上がJavaScriptのページ間通信メソッドのストレージイベントの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。