四种跨浏览器窗口通讯

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小时内删除侵权内容。