HTML5 postMessage 和 localStorage 實現窗口間通信

 

LocalStorage（不能跨域）

基本思想：通過localStorage的標准事件storage來實現跨頁面通信，即頁面A通過寫入特定數據觸發頁面B的storage事件，頁面B響應之后再寫入數據通知頁面A處理結果；

引言

隨着Web技術的發展，涌出了越來越多的復雜的應用。諸多Web應用逐漸向增強用戶體驗方向發展。在諸如付款、在線聊天等場景中，有時需要多頁面進行數據通信。以前的實現方法有cookie、服務器中轉、Flash插件等方法，而HTML5提供了新的LocalStorage API，能夠更為便捷的實現跨頁面通信，且相比以前的技術有容量大、效率高、無需插件等優點。

“What”能實現什么

LocalStorage API被IE8+及Firefox、Chrome、Safari等主流瀏覽器所支持。利用localStorage能夠實現數據的存儲，而通過監控數據的寫入，頁面可以獲得其它頁面想要傳達的信息。

在“在線聊天”功能中，服務器與客戶端的數據通信需要占用大量的帶寬和服務器計算時間，而如果一個瀏覽器同時打開了多個窗口更是雪上加霜。作為一個綠色環保的程序員，相對於堆服務器，我們應該立足於解決帶寬與計算量的浪費，而通過跨頁面的協同合作，我們可以實現多個頁面之間可以共享一條數據通道，同時節省了服務器和客戶端的消耗。

其它的諸如微博等應用的“換膚”功能，如果能夠實現打開的多個窗口同時更換皮膚，勢必能夠提高用戶的體驗。

“Where”用在何處

上面已經提及了兩處應用場景，實際上任何Web應用都應該考慮多窗口的情形。用於在窗口之間切換時，如何實現無障礙的應用體驗？產品經理總是抱怨打開了多個窗口怎么就不能實現聯動？在一個窗口登錄了其它窗口怎么就非得刷新才能使用一些功能？這些統統可以通過跨頁面通信解決。

“How”怎么實現

HTML5 LocalStorage API中包含了"storage"事件。通過監聽window對象的storage事件，可以在其它頁面窗口調用localStorage的存儲方法時，得到通知。為了進行跨頁面通信事件與普通存儲事件的區分。

 

Storage類 有兩個主要對象：localStorage和sessionStorage

屬性：

length                                                           window.localStorage.length     有多少名值對存放在Storage對象中

方法：

setItem(name,value)                                       window.localStrorage.setItem()

removeItem(name)

getItem(name)        

key(index)                                                      獲取index位置處的 值的名字name

clear()                                                            刪除所有值

事件：

storage

對Storage對象進行任何修改 都會在文檔上觸發storage事件

偵聽storage事件

window.addEventListener("storage",function(event){...});

event 對象有以下屬性：

domain：發生變化的存儲空間的域名

key：設置或者刪除的鍵名

newValue： 設置--新值   刪除--null

oldValue：鍵更改前的值

 

 

 

 

 

 

postMessage

 發送   ：  otherWindow.postMessage(message, targetOrigin, [transfer]);       //調用postMessage方法的window對象是指要接收消息的那一個window對象   

 監聽   ：  message事件   window.addEventListener( "message",  function(event) {alert(event.data);})

 

假設在a.html里嵌套個<iframe src="http://www.b.com/b.html" frameborder="0"></iframe>,在這兩個頁面里互相通信

 示例：

 a.com/a.html

 window.onload = function() {
        window.addEventListener("message", function(event) {
            alert(event.data);
        });
      //  window.frames[0].postMessage("b data", "http://www.b.com/b.html");  //調用postMessage方法的window對象是指要接收消息的那一個window對象
    }

 

b.com/b.html

window.onload = function() {
   //      window.addEventListener("message", function(event) {
  //          alert(event.data);
 //       });
        window.parent.postMessage("a需要的數據", "http://www.a.com/a.html");
    }

 

 

 

對比：

postMessage是從a窗口發送信息到b窗口，b窗口監聽到消息后做出回應；而localStorage是在a窗口改變某一個存儲值，b窗口監聽到了存儲值的變化，然后獲取該值，進而完成通信的同樣的效果。