多个浏览器标签页之间的通讯方法
在一些需求中，可能会遇到在一个标签页修改了数据，在另一个标签页不用刷新也可以获取到改变后的数据。这就叫做标签页之间的通讯。
下面让我们看看浏览器标签页之间的通讯方法都有什么。
1. 通过locaStorage
在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容
在另一个标签页里面监听 storage 事件，在事件event对象属性中获取信息。 即可得到 localstorge 存储的值，实现不同标签页之间的通信。
event事件对象包含以下信息
- domain
- newValue
- oldValue
- key
标签页A
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<input type="text" id="name">
<button id="btn">点击button>
<script>
document.querySelector('#btn').onclick = function () {
// 获取输入数据
var name=document.querySelector("#name").value
// 在浏览器本地存储值
window.localStorage.setItem('name', name)
}
script>
body>
html>
标签页B
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
body>
<script>
// 监听storage，发生改变就会触发次事件
window.addEventListener('storage', event => {
console.log(`${
event.key} = ${
event.newValue}`)
})
script>
这样就解决了不同标签页之间的通信问题
2. 通过cookie
将要传递的信息存储在cookie中，每隔一定时间读取cookie信息，即可随时获取要传递的信息。
标签页A
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<input type="text" id="name">
<button id="btn">点击button>
<script>
document.querySelector('#btn').onclick = function () {
// 获取输入数据
var name=document.querySelector("#name").value
// 在cookie存储值
document.cookie = "name" + name
}
script>
body>
html>
标签页B
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
body>
<script>
function getCookie (key) {
return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key]
}
getCookie("name")
setInterval(function(){
console.log("name=" + getCookie("name"))
}, 200)
script>
通过这种方式也可以解决不同标签页之间的通讯
3. 通过SharedWorker
SharedWorker是html5浏览器的新特性，这种是可以多个标签页、iframe共同使用的。SharedWorker可以被多个window共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)
首先新建一个share.js文件，可以把它理解为类似eventBus的服务端，可以连接不同标签页的桥梁。
let data = ''
onconnect = function(e) {
let port = e.ports[0]
// 注册一个onmessage监听信息的事件，客户端(即使用sharedWorker的标签页)发送message时就会触发
port.onmessage = function(e) {
if(e.data == 'get'){
// 调用此方法，变量data的值回传给客户端
port.postMessage(data)
}else{
// 客户端传递过来的数据存储到data变量中
data=e.data
}
}
}
只需注册一个onmessage监听信息的事件，客户端(即使用sharedWorker的标签页)发送message时就会触发。
webworker端会进行判断，传递的数据为’get’时，就把变量data的值回传给客户端，其他情况，则把客户端传递过来的数据存储到data变量中
标签页A
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="log">div>
<input type="text" name="" id="text">
<button id="get">getbutton>
<button id="set">setbutton>
<script>
// 创建一个SharedWorker实例
const worker = new SharedWorker('./shared.js')
const get = document.getElementById('get')
const set = document.getElementById('set')
const text = document.getElementById('text')
const log = document.getElementById('log')
// 绑定监听worker实例的message
// 服务端(即shared.js)每次接收到消息
worker.port.addEventListener('message', function(e) {
// e.data就是服务端发来的信息
log.innerText = e.data
}, false)
worker.port.start() //使用addEventListener 绑定监听需要次此方法
set.addEventListener('click',function(e){
// 向服务端(即shared.js)发送信息
worker.port.postMessage(text.value)
},false)
script>
body>
html>
其实两个页面的代码完全一样，但是为了区分传送方和接收方，标签页A是传送方，标签页B是接收方
标签页B
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<div id="log">div>
<input type="text" name="" id="text">
<button id="get">getbutton>
<button id="set">setbutton>
<script>
// 创建一个SharedWorker实例
const worker = new SharedWorker('./shared.js')
const get = document.getElementById('get')
const set = document.getElementById('set')
const text = document.getElementById('text')
const log = document.getElementById('log')
// 绑定监听worker实例的message
// 服务端(即shared.js)每次接收到消息
worker.port.addEventListener('message', function(e) {
// e.data就是服务端发来的信息
log.innerText = e.data
}, false)
worker.port.start() //使用addEventListener 绑定监听需要次此方法
get.addEventListener('click',function(e){
// 向服务端(即shared.js)发送信息
worker.port.postMessage('get')
},false)
script>
body>
html>
这里就介绍了标签页通讯的三种方案，还有一种是通过webSocket协议来解决。这里就不一一阐述了。