四種跨瀏覽器窗口通訊

WebSocket

這個沒有太多解釋，WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。當然是有代價的，需要服務器來支持。

js語言，現在比較成熟穩定當然是 socket.io和ws. 也還有輕量級的ClusterWS。

你可以在The WebSocket API (WebSockets) 看到更多的關于Web Socket的信息。

定時器 + 客戶端存儲

定時器：setTimeout/setInterval/requestAnimationFrame

客戶端存儲： cookie/localStorage/sessionStorage/indexDB/chrome的FileSystem

定時器沒啥好說的，關于客戶端存儲。

cookie: 每次會帶到服務端，并且能存的并不大，4kb?，記得不太清楚

localStorage/sessionStorage 應該是5MB, sessionStorage關閉瀏覽器就和你說拜拜。

indexDB 這玩意就強大了，不過讀取都是異步的，還能存 Blob文件，真的是很high。

chrome的FileSystem ,Filesystem & FileWriter API,主要是chrome和opera支持。這玩意就是文件系統。

StorageEvent

Page 1

localStorage.setItem('message',JSON.stringify({ message: '消息'， from: 'Page 1', date: Date.now() })) 復制代碼

Page 2

window.addEventListener("storage", function(e) { console.log(e.key, e.newValue, e.oldValue) }); 復制代碼

如上， Page 1設置消息， Page 2注冊storage事件，就能監聽到數據的變化啦。

上面的e就是StorageEvent,有下面特有的屬性（都是只讀）：

key ：代表屬性名發生變化.當被clear()方法清除之后所有屬性名變為null

newValue：新添加進的值.當被clear()方法執行過或者鍵名已被刪除時值為null

oldValue：原始值.而被clear()方法執行過，或在設置新值之前并沒有設置初始值時則返回null

storageArea：被操作的storage對象

url：key發生改變的對象所在文檔的URL地址

Broadcast Channel

這玩意主要就是給多窗口用的，Service Woker也可以使用。 firefox,chrome, Opera均支持，有時候真的是很討厭Safari，瀏覽器支持77%左右。

使用起來也很簡單, 創建BroadcastChannel, 然后監聽事件。 只需要注意一點，渠道名稱一致就可以。

Page 1

var channel = new BroadcastChannel("channel-BroadcastChannel"); channel.postMessage('Hello, BroadcastChannel!') 復制代碼

Page 2

var channel = new BroadcastChannel("channel-BroadcastChannel"); channel.addEventListener("message", function(ev) { console.log(ev.data) });

TCP/IP

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。