共计 2123 个字符，预计需要花费 6 分钟才能阅读完成。
实现浏览器内多个标签页之间的通信
第一种方式：websocket 协议.1. 首先我们得了解 websocket 是什么？它是一种网络通信协议 2. 为什么会用到 websocket? 因为 http 有缺陷，通信只可以由客户端发起，服务器无法主动向客户端发送消息。但如果这时，服务器有连续变化的状态，那么就只能使用轮询的方式来访问。轮询：每隔一段时间，就发出一个询问. 因为 websocket 拥有全双工 (full-duplex) 通信自然可以实现多个标签页之间的通信.
第二种方式：localstoragelocalstorage 是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信这里补充一点其他的：session 是会话级的存储空间，每个标签页都是单独的使用方式：直接在 window 对象上添加监听，以下为例子：标签页 1：
<input id=”name”>
<input type=”button” id=”btn” value=” 提交 ”>
<script type=”text/javascript”>
$(function(){
$(“#btn”).click(function(){
var name=$(“#name”).val();
localStorage.setItem(“name”, name);
});
});
</script>
标签页 2：
<script type=”text/javascript”>
$(function(){
window.addEventListener(“storage”, function(event){
console.log(event.key + “=” + event.newValue);
});
});
</script>
storage 事件，针对都是非当前页面对 localStorage 进行修改时才会触发，当前页面修改 localStorage 不会触发监听函数。
第三种方式：html5 浏览器的新特性 SharedWorker 关于 SharedWorker 普通的 webworker 直接使用 new Worker()即可创建，这种 webworker 是当前页面专有的。然后还有种共享 worker(SharedWorker)，这种是可以多个标签页、iframe 共同使用的。SharedWorker 可以被多个 window 共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)
使用方式首先新建一个 js 文件 worker.js，具体代码如下：
// sharedWorker 所要用到的 js 文件，不必打包到项目中，直接放到服务器即可
let data = ”
onconnect = function (e) {
let port = e.ports[0]
port.onmessage = function (e) {
if (e.data === ‘get’) {
port.postMessage(data)
} else {
data = e.data
}
}
}
webworker 端 (暂且这样称呼) 的代码就如上，只需注册一个 onmessage 监听信息的事件，客户端 (即使用 sharedWorker 的标签页) 发送 message 时就会触发.
注意点 1.webworker 无法在本地使用，出于浏览器本身的安全机制，所以我这次的示例也是放在服务器上的，worker.js 和 index.html 在同一目录。2. 因为客户端和 webworker 端的通信不像 websocket 那样是全双工的，所以客户端发送数据和接收数据要分成两步来处理。示例中会有两个按钮，分别对应的向 sharedWorker 发送数据的请求以及获取数据的请求，但他们本质上都是相同的事件 – 发送消息。3.webworker 端会进行判断，传递的数据为 ’get’ 时，就把变量 data 的值回传给客户端，其他情况，则把客户端传递过来的数据存储到 data 变量中。下面是客户端的代码：
// 这段代码是必须的，打开页面后注册 SharedWorker
// 显示指定 worker.port.start()方法建立与 worker 间的连接
if (typeof Worker === “undefined”) {
alert(‘ 当前浏览器不支持 webworker’)
} else {
let worker = new SharedWorker(‘worker.js’)
worker.port.addEventListener(‘message’, (e) => {
console.log(‘ 来自 worker 的数据：’, e.data)
}, false)
worker.port.start()
window.worker = worker
}
// 获取和发送消息都是调用 postMessage 方法，我这里约定的是传递 ’get’ 表示获取数据。
window.worker.port.postMessage(‘get’)
window.worker.port.postMessage(‘ 发送信息给 worker’)
webSocket 如何兼容低浏览器？
1.Adobe Flash Socket 2.ActiveX HTMLFile (IE)3. 基于 multipart 编码发送 XHR4. 基于长轮询的 XHR
以上内容的参考链接 – 多个标签实现通信关于 websocket 原理的有趣解释
