如何实现浏览器内多个标签页之间的通信?

方法一：使用localStorage

使用localStorage.setItem(key,value);添加内容

使用storage事件监听添加、修改、删除的动作   

html代码

JS代码-页面1

<script type="text/javascript"> 
      $(function(){   
          $("#btn").click(function(){   
              var name=$("#name").val();   
              localStorage.setItem("name", name);  
          });   
      });   
  </script> 

JS代码-页面2

<script type="text/javascript"> 
      $(function(){  
          window.addEventListener("storage", function(event){   
              alert(event.key + "=" + event.newValue);   
          });    
      }); 
  </script> 

 

方法二、使用cookie+setInterval

HTML代码

<inputidinputid="name"><input type="button" id="btnOK"value="发送">

JS代码-页面1   

$(function(){
       $("#btnOK").click(function(){
           varname=$("#name").val();
           document.cookie="name="+name;
       });
   });

JS代码-页面2

//获取Cookie天的内容
function getKey(key) {
    return JSON.parse("{\""+ document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") +"\"}")[key];
}
//每隔1秒获取Cookie的内容
setInterval(function(){
    console.log(getKey("name"));
 },1000);