Javascript常见问题及解决（二）如何实现浏览器内多个标签页之间的通信?

72 阅读 0 评论 48 点赞

我是靠谱客的博主虚拟芝麻，这篇文章主要介绍Javascript常见问题及解决（二）如何实现浏览器内多个标签页之间的通信?，现在分享给大家，希望可以做个参考。

方法一：使用localStorage

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

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

[javascript] 
view plain
 copy

 window.addEventListener("storage",function(event){  
         $("#name").val(event.key+”=”+event.newValue);  
 });  
    

方法二、使用cookie+setInterval

HTML代码

[html] 
view plain
 copy

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

JS代码-页面1

[javascript] 
view plain
 copy

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

JS代码-页面2

[javascript] 
view plain
 copy

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