JS实现两个页面之间的通信

两个不同页面之间的通信，通过一个拖拽demo来模拟；

首先，写好基础的拖拽代码：

[html] view
plain copy

<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，获取本地的数据：

[html] view
plain copy

<script>  

    window.onload = function() {  

       var oDiv = document.getElementById('div');  

   　 window.onstorage = function(ev){  

          var json = JSON.parse(localStorage[ev.key]);  

                       

       　　oDiv.style.left = json.left + "px";  

          oDiv.style.top = json.top + "px";  

      }  

   }  

</script>  

   通过onstorage这个方法实现两个页面之间的通信，获取到本地储存的数据，转成数字实现两个页面的同步。