[html] 第9天 浏览器内多个标签页之间的通信方式有哪些？

[haizhilin2013]

第9天 浏览器内多个标签页之间的通信方式有哪些？

[github-linong]

1. stroage
2. postmessage

https://segmentfault.com/a/1190000018386033

[tiyunchen]

PostMessage: 曾经在项目中使用过: 在一个页面内加了一个iframe, 由于父页面要和iframe通信所以使用了这个方式

[Damon99999]

1：本地存储 2：postMessage 如果使用vue框架那么vuex也是ok的

[Konata9]

• 借助 cookie, localStorage(sessionStorage 在某些场景下并不能跨标签，必须要原页面的 a 标签的 target=_blank 才行)。这些只要在同一个域名下就可以进行通信和数据的共享
• 借助 window.postMessage API 来进行消息的传递

[xv700]

完全答案 WebSocket （可跨域） postMessage（可跨域） Worker之SharedWorker Server-Sent Events localStorage BroadcastChannel Cookies

https://xv700.gitee.io/message-communication-for-web/

[qhdxwdm]

1.WebSocket （可跨域） 2.postMessage（可跨域） 3.SharedWorker 4.Server-Sent Events 5.localStorage 6.BroadcastChannel IE不支持 7.Cookies

[censek]

• localStorage
• cookie + setInterval

[kruzabc]

不借助服务器支持的话：

1. 监听storage事件
2. cookie + setInterval
3. BroadcastChannel (兼容：chrome 54+ ，firefox：38+， Edge 76 +, safari 13, IE尚不支持)
4. SharedWorker

[blueRoach]

1.websocket H5提供的在TCP连接上进行的双向通讯 2.localStorage(sessionStorage是每个标签页独立的) 3.cookie 4.SharedWorker

[giggleCYT]

websocket协议、 localstorage、 以及使用html5浏览器的新特性SharedWorker

[MrZ2019]

完全答案 WebSocket （可跨域） postMessage（可跨域） Worker之SharedWorker Server-Sent Events localStorage BroadcastChannel Cookies

[githubzml]

尝试过的 localStroage WebScoket

[buuug7]

这个题目有些含糊，多个标签指的是在同一个域下的多个标签还是不同域下的多个标签。尝试回答下：

跨域

• websocket
• postMessage（推荐）

非跨域

• cookie
• localStorage

[xiezhenghua123]

localstorage sessionstorage websocket

[amikly]

1.WebSocket（可跨域）

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

2.postMessage（可跨域）

window.postMessage()方法安全地启用Window对象之间的跨源通信。

3.SharedWorker

SharedWorker可以被多个window共用，所以可以用来跨页面传输数据，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)

4.Server-Sent Events

HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。 Server-Sent 事件指的是网页自动获取来自服务器的更新。 以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

5.localStorage（可以添加事件监听）

ocalstorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信，直接在window对象上添加监听即可。

ps：sessionStorage是会话级的存储空间，每个标签页都是单独的

6.Cookies

Cookies在同一个域名内，并且目录也得相同

7.BroadcastChannel（Chrome商店的api）

只要是在同一原始域和用户代理下，所有窗口、iframe之间都可以进行交互。感觉就类似于广播。

[WangXi01]

cookie,localstorage实现标签间的存储

[Iambecauseyouare]

1.localStorage 2.webSocket 3.sharedWorker 4.cookie+sentlnterval

[gnu-xiaosong]

websocket postMessage localStorage sharedWorker cookie

[lili-0923]

• cookie + setInterval方式

  缺点：

  • cookie空间有限，浏览器在每一个域名下最多能设置30-50个cookie，容量最多为4k左右。
  • 每次HHTP请求才会把当前域的cookie发送到服务器上，包括只在本地才用到的而服务器不用的，浪费带宽。
  • setInterval频率设置过大会影响浏览器的性能，过小会影响时效性。

  优点：每个浏览器都兼容

• localStorage方式

  • 缺点：1、localStorage是h5的属性，高版本的浏览器才支持，而且不同浏览器localStorage大小了限制不统一。2、localStorage只能监听非己页面的数据变化。
  • 优点：解决了cookie容量小和时效性的问题。

• webSocket方式

  前面两种方式只用到了客户端，没有用到服务端，只用到了浏览器就完成了多个窗口的通信。而webSocket需要用到服务端，send.html发送消息到WebSocketServer，WebSocketServer再实时把消息发给receive.html，其实这就是实时通信的原理（微信、qq、淘宝旺旺等）

  • 缺点：1、它需要服务端的支持才能完成任务。如果socket数据量比较大的话，会严重消耗服务器的资源。 2、必须要在服务端项目中写服务端监听程序才能支持。
  • 优点：使用简单（客户端简单，服务端苦逼了），功能灵活、强大，如果部署了WebSocket服务器，可以实现很多实时的功能。

• SharedWorker方式

  WebWorker的升级版，WebWorker只能在一个窗口内使用，而现在我们需求是多个窗口之间通信，就要用SharedWorker了。 SharedWorker原理和WebWorker几乎是一样的，只不过SharedWorker可以跨多个页面使用。 SharedWorker也是纯客户端的，没有服务端的参与。 SharedWorker在客户端有一个自己维护的对象worker.js，消息存储在worker.js中的data中 SharedWorker不如localStorage的是接收消息不是自动的，也要用定时器实时从worker.js中获取消息。