2个同源tab页之间的数据交互

如果要实现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事件，如果要解决这种情况，可以在消息体内加入时间戳。