兩個頁面之間的通信

今天要給大家說的是兩個不同頁面之間的通信，通過一個拖拽demo來模擬；

首先，寫好基礎的拖拽代碼：

<script>
   window.onload = function() {
       var oDiv = document.getElementById('div');
       oDiv.onmousedown = function(ev) {
           var ev = window.event || ev;
           var disX = ev.clientX - oDiv.offsetLeft;
           var disY = ev.clientY - oDiv.offsetTop;
           document.onmousemove = function(ev) {
              var factX = ev.clientX - disX;
              var factY = ev.clientY - disY;
              oDiv.style.left = factX + 'px';
              oDiv.style.top = factY + 'px';
              localStorage.json = JSON.stringify({left:oDiv.offsetLeft,top:oDiv.offsetTop});
          }
           document.onmouseup = function() {
                document.onmousemove = null;
           }
       }
 　　}
</script>

這是將div拖動變化的值存入到本地儲存localstorage，用JSON.stringify將其轉為字元串形式：

然後新建一個新建一個demo，獲取本地的數據：

 1 <script>
 2    window.onload = function() {
 3       var oDiv = document.getElementById('div');
 4    　 window.onstorage = function(ev){
 5           var json = JSON.parse(localStorage[ev.key]);
 6                     
 7       　　oDiv.style.left = json.left + "px";
 8          oDiv.style.top = json.top + "px";
 9       }
10    }
12 </script>

   通過onstorage這個方法實現兩個頁面之間的通信，獲取到本地儲存的數據，轉成數字實現兩個頁面的同步。

一個簡單的頁面通信就可以實現了，希望能幫到大家！！！！！！！