如果要实现2个同源tab页之间的数据交互,可以选择使用localStorage,因为它的存储遵循同源策略。通过约定localStorage某一个itemName,基于该key值的内容进行通信。
H5提供了storage事件,通过window对象监听storage事件,会监听到localStorage的变化(包括item的增加、删除、修改),从而完成不同tab页之间的数据交互。
示例:
A页面
window.addEventListener("storage", function(ev){
if (ev.key == 'message') {
// removeItem也会触发storage事件,此时ev.newValue为空
if(!ev.newValue) return;
var message = JSON.parse(ev.newValue);
console.log(message);
}
});
function send(message){
localStorage.setItem("message",JSON.stringify(message))
localStorage.removeItem("message");
}
//发送消息给B页面
send("message from A");
B页面
window.addEventListener("storage", function(ev){
if (ev.key == 'message') {
// removeItem也会触发storage事件,此时ev.newValue为空
if(!ev.newValue) return;
var message = JSON.parse(ev.newValue);
// 发送消息给A页面
send("B has received message from A");
}
});
function send(message){
localStorage.setItem("message",JSON.stringify(message))
localStorage.removeItem("message");
}
当我们在A页面中执行send函数,其他同源页面会触发storage事件,而A页面却不会触发storage事件。
注意:连续发送两次相同的消息只会触发一次storage事件,如果要解决这种情况,可以在消息体内加入时间戳。