如何实现浏览器内多个标签页之间的通信？

1、使用 LocalStorage 

特点：同域共享存储空间；持久化将数据存储在浏览器；提供事件监听storage变化

实现逻辑： A页面将数据存储在本地。B页面监听storage的变化，同步storage的最新数据；

好处：操作简单、易于理解；

限制：必须是在同域下才能共享；

2、使用 WebSocket 

 特点：保持连接状态；全双工通信；没有同源共享策略

实现逻辑：

 

可以理解把websocket理解为一个简单的聊天工具，2个页面都在聊天工具上聊天，页面A发送消息给页面B，页面B实时接受到最新消息。

好处：可实现跨域共享；

限制：需要专门起一个websocket服务器，维护成本高，不建议使用

3、使用SharedWorker

背景：为了弥补JS单线程的坏处，webWorker随之而生，它可以为JS创造多线程环境。而ShareWorker是其中的一种。 

特点：

原理：和websocket类似，都是广播和接收消息； 

好处：无需安装服务器，利用原生API实现，使用方便；

限制：必须是在同域下才能共享；不方便调试；不兼容IE

 

4、cookie + setInterval

特点：同源共享；具有存储空间限制；请求会自动携带cookie 

实现逻辑：类似于LocalStorage，在页面A存储数据在cookie上，页面B设置定时器每秒钟获取一次最新的cookie，就可以获取到页面A最新的数据。 

好处：简单

限制： 必须是在同域下才能共享；限制存储空间；浪费资源；

 

5、postMessage

 特点：可跨域通信、所有主流浏览器（包括IE8）都支持。

实现逻辑：利用 window 提供的 postMessage 方法和 message 事件就ok了~ 

 

 6、总结