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

本题主要考察数据存储的知识，数据存储有本地和服务器存储两种方式，对于前端开发来讲，只需要讲解用本地存储的方式来解决就好。当然也能知道服务器端的方式更好。本题的难易程度一般，只要能够说出思路就可以，至少说两种解决方法。 

解题方法 

最近因为项目上需要使用到客户端存储,所以稍微研究了一下,以下说说自己的理解和使用经验

1.调用方法相同

各自都包含以下几种操作:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

//根据key获取对应的值; window.sessionStorage.getItem(key); window.localStorage.getItem(key); //新增key-value,若key已存在,则更新value; window.sessionStorage.setItem(key,value); window.localStorage.setItem(key,value); //根据key移除对应的值 window.sessionStorage.removeItem(key); window.localStorage.removeItem(key); //移除全部key-value window.sessionStorage.clear(); window.localStorage.clear(); //根据索引获取对应key window.sessionStorage.key(index); window.localStorage.key(index);

2.生命周期不同

sessionStorage是人如其名,只针对当前session(会话)有效,关闭标签页即失效;

localStorage则不然,即使关闭了标签页甚至浏览器,依然存在,下次打开页面时,依然可以直接使用,

　　但是要注意,清除浏览器缓存时,localStorage的内容也会清理掉;

3.数据共享

sessionStorage由于上述特性,也就不能够在不同页面之间进行数据共享,同一域名也是不可以的;

localStorage则能够实现该需求,但是仅限于同一域名下;

总结

以上所述是小编给大家介绍的JS 中LocalStorage和SessionStorage的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

方法一：使用localStorage

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

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

[javascript]  view plain  copy

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

方法二、使用cookie+setInterval

HTML代码

[html]  view plain  copy

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

JS代码-页面1   

[javascript]  view plain  copy

1. $(function(){  
2.        $("#btnOK").click(function(){  
3.            varname=$("#name").val();  
4.            document.cookie="name="+name;  
5.        });  
6.    });  

JS代码-页面2

[javascript]  view plain  copy

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