ホームページ > 記事 > ウェブフロントエンド > ストレージイベント、JSページ間の通信方法の紹介
ストレージイベント、JSページ間の通信方法の紹介
- 一个新手オリジナル
- 2017-10-26 09:45:411552ブラウズ
ページを書いていると、2つのページ間でデータやイベントを転送する必要があるという要件に遭遇することがあります。このとき、今日説明するストレージ イベントを使用する必要があります。このイベントを学習する前に、localStorage の使用方法を理解する必要があります。具体的な使用方法については、他のドキュメントを参照してください。ストレージ イベントをトリガーする条件は次のとおりです:
同じブラウザが同じオリジンを持つ 2 つのページを開く
localStorageが 1 つの Web ページで変更されるlocalStorage另一网页注册了
storage
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('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>以上がストレージイベント、JSページ間の通信方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。