多个标签页之间的通信

Question

如何实现浏览器内多个标签页之间的通信？
看网上了用localstorge 或cookie
有没有一个demo可以看下具体如果实现的！！谢谢！！

Answer 1

多个标签页通信主要是利用了 localStorage 的增删改事件监听

页面A发送事件

function sendMsg(text) {
    window.localStorage.setItem('msg',text);
}

页面B接收事件

window.addEventListener('storage', function (evt) {
    if(evt.key==='msg')
       console.log(evt.newValue);
});

需要注意的是重复设置相同的键值不会再次触发事件

Answer 2

也可以使用cookie+setInterval，将要传递的信息存储在cookie里面，然后每隔一定时间读取cookie信息来实现。

<input type="button" id="butOk"value="信息">

//a页面
var mess=document.getElementById("butOk").value();    
document.cookie="mess="+mess;

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

Answer 3

你只要在讲你想要保留的值存在localstorage里面啊。 比如说localstorage.userInfo=userInfo；。在其他页面你只要直接取localstorage.userInfo。 就能看见你要的值。 不过localstorage不能存对象。 你如果传递对象就先转成字符串。 然后取值的时候再转成对象。

Answer 4

a.html

// 设 location.href 为 [http://xxx/a.html]
// 两种方法设置 localStorage
localStorage['location.href'] = location.href;
localStorage.setItem('location.href', location.href);

b.html

// 设 location.href 为 [http://xxx/xxx/b.html]
// 两种方法获取 localStorage
console.info(localStorage['location.href']);
console.info(localStorage.getItem('location.href'));
// 输出 http://xxx/a.html