ホームページ > 記事 > ウェブフロントエンド > JavaScriptのページ間通信メソッドのストレージイベントの詳細説明
JavaScriptのページ間通信メソッドのストレージイベントの詳細説明
- 黄舟オリジナル
- 2017-10-26 09:43:241425ブラウズ
ページを書いていると、2つのページ間でデータやイベントを転送する必要があるという要件に遭遇することがあります。このとき、今日説明するストレージ イベントを使用する必要があります。このイベントを学習する前に、localStorage の使用方法を理解する必要があります。具体的な使用方法については、他のドキュメントを参照してください。ストレージ イベントをトリガーする条件は次のとおりです:
同じブラウザーが同じオリジンを持つ 2 つのページを開きます
localStorageが一方の Web ページで変更されますlocalStorage另一网页注册了
storage
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('button').onclick = function(){
localStorage.setItem('Num', 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 サイトの他の関連記事を参照してください。