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事件，如果要解決這種情況，可以在消息體內加入時間戳。