JavaScript頁間通訊方法之storage事件詳解-js教程-PHP中文網

JavaScript頁間通訊方法之storage事件詳解

黄舟

發布： 2017-10-26 09:43:24

原創

1405 人瀏覽過

　　在寫頁面的時候有時會遇到這樣的需求，需要兩個頁面之間傳遞資料或一個事件。這時候，就需要用到我今天所要講的storage事件，學習這個事件之前，需要先了解localStorage的用法。具體用法可以查看其他文件。出發storage事件的條件如下：

同一個瀏覽器開啟了兩個同源的頁面
一個網頁中修改localStorage
另一網頁註冊了storage事件

　　#storage事件，只有在同源頁下，才有作用，不同源是沒有作用的。那什麼是同源呢？

　　URL由協定、網域名稱、連接埠和路徑組成，如果兩個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之間通訊。

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

登入後複製

page B：監聽storage事件

<!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頁間通訊方法之storage事件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！