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

挣钱买包包

使用本地存储方法

1.cookie

（1）客户端和服务器端都会请求服务器，性能下降

（2）存储限制，4kb

（3）页面的cookie是共享的

storage

只是在客户端使用，不会请求服务器处理,存储量比较大,只能存储字符串，非字符串的数据在存储之前会被转换为字符串

1. seessionStorage

临时性的，页面打开有，页面关闭没有

数据不共享

2.localStorage

永久性的存储

数据共享

3.api

clear（）删除所有值，ff中没有实现

getItem（）根据指定的名字name获取对应的值

key（index）获得index处的值

removeItem（name）删除由name指定的明值对

setItem(name，value)

发表于 2016-08-30 20:33:58 回复(0)

月亘野

我来整合一下大家的答案：

1.cookie

客户端和服务器端都会请求服务器，性能下降

存储限制，4kb

页面的cookie是共享的

2.localStorage

只是在客户端使用，不会请求服务器处理,存储量比较大,只能存储字符串，非字符串的数据在存储之前会被转换为字符串

1. seessionStorage
生命期是当前会话，当前会话结束，数据会被清除（注意，用window.open打开的新窗口会延长当前会话）

临时性的，页面打开有，页面关闭没有

数据不共享

2.localStorage

永久性的存储

数据共享

3.postMessage

html5新特性，专门设计出来用于跨页面脚本通信

有浏览器兼容问题

需要相同的的协议，端口号，以及域名

4.SharedWorker

使用SharedWorked可以创建一个多页面共享的进程，通过这种方式来实现多页面之间的消息互通

html5新特性，有浏览器兼容问题

需要相同的的协议，端口号，以及域名

5.websocket

websocket长连接，全双工通讯

相当于后端做一个信息中转站，信息从第一个标签，传到后端，再传到第二个标签

需要后端支持

有浏览器兼容问题

6.轮询模式

相当于后端做一个信息中转站，信息从第一个标签，传到后端，再传到第二个标签

需要后端支持

无浏览器兼容问题

编辑于 2020-09-07 18:23:37 回复(0)

Try

WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；

localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；

发表于 2016-07-29 16:18:15 回复(0)

abao呢

调用 localstorge、cookies 等本地存储方式

发表于 2015-07-27 14:25:07 回复(1)

不给糖果就捣蛋

seessionStorage的数据是单标签页共享的，一个会话时间内 单标签页同域下的不同页面之间共享。

发表于 2017-09-10 10:14:26 回复(0)

yangxiaorong

WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；

localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

发表于 2016-11-14 17:15:29 回复(0)