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

题目点评本题主要考察数据存储的知识，数据存储有本地和服务器存储两种方式，对于前端开发来讲，只需要讲解用本地存储的方式来解决就好。当然也能知道服务器端的方式更好。本题的难易程度一般，只要能够说出思路就可以，至少说两种解决方法。 解题方法 方法一：使用localStorage使用localStorage.setItem(key,value);添加内容使用storage事件监听添加、修改、删除的动作   [javascript] view plain copywindow.addEventListener("storage",function(event){  
        $("#name").val(event.key+”=”+event.newValue);  
});  
   
方法二、使用cookie+setIntervalHTML代码[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); 

方法1： localStorage:localStorage在一个标签页面里面被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localStorage存储的值，实现不同标签页之间的通讯。标签页1：
[html] view plain copy<span style="font-size:14px;"><input id="name">    
<input type="button" id="btn" value="提交">    
<script type="text/javascript">    
    $(function(){      
        $("#btn").click(function(){      
            var name=$("#name").val();      
            localStorage.setItem("name", name);     
        });      
    });      
</script>  </span>  

标签页2：[javascript] view plain copy<span style="font-size:14px;"><script type="text/javascript">    
    $(function(){     
        window.addEventListener("storage", function(event){      
            console.log(event.key + "=" + event.newValue);      
        });       
    });    
</script></span>  

方法2：cookie+setInterval使用cookie+setInterval，将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
标签页1：[html] view plain copy<span style="font-size:14px;"><input id="name">    
<input type="button" id="btn" value="提交">    
<script type="text/javascript">    
    $(function(){      
        $("#btn").click(function(){      
            var name=$("#name").val();      
            document.cookie="name="+name;      
        });      
    });      
</script>  </span>  

标签页2：[javascript] view plain copy<span style="font-size:14px;"><script type="text/javascript">    
    $(function(){     
        function getCookie(key) {      
            return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];      
        }       
        setInterval(function(){      
            console.log("name=" + getCookie("name"));      
        }, 10000);      
    });    
</script> </span>