原理：
cookie是浏覽器端的存儲容器，而且它是多頁面共享的，利用cookie多頁面共享的特性，可以實作多個标簽頁的通信。
比如： 一個标簽頁發送消息（将發送的消息設定到cookie中），一個标簽頁接收消息（從cookie中擷取消息）
例子：
01 發送消息的标簽頁（其實就是将要發送的消息設定到cookie中）
<!DOCTYPE html>
<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>Document</title>
</head>
<body>
<!-- 這個頁面用來發送資訊（設定cookie的值） -->
<input type="text" id='msg1'><br> <!--輸入框 msg1 -->
<input type="text" id='msg2'><br> <!--輸入框 msg2 -->
<button id="send">發送</button> <!-- 點選發送按鈕觸發send事件 -->
<script>
send.onclick=function(){
if(msg1.value.trim()!=='' && msg2.value.trim()!==''){ //如果msg1和msg2的内容不是空的，執行if語句
document.cookie='msg1='+msg1.value.trim(); // 将msg1和msg2的值放入cookie中（給cookie指派）
document.cookie='msg2='+msg2.value.trim(); // cookie 格式 msg=value
} //因為cookie的值是多頁面共享的，是以可以實作标簽頁的傳值
}
</script>
</body>
</html> 02 接收消息的标簽頁（其實就是從cookie中擷取消息并顯示在頁面）
<!DOCTYPE html>
<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>Document</title>
</head>
<body>
<!-- 這個頁面用來接收資訊（擷取cookie的值 ） -->
<h1>收到消息：<span id="recMsg1" ></span></h1>
<h1>收到消息：<span id="recMsg2" ></span></h1>
<script>
// 擷取cookie的方法 document.cookie
// 01 将cookie中的值 msg1=hellwo; msg2=word 轉變為 json字元串 格式 {"msg1":"hellwo","msg2":"word"}
function getKey(key){
var obj='{"'+document.cookie.replace(/=/g,'":"').replace(/;\s+/g,'","')+'"}'
var cookies=JSON.parse(obj) // 02 将json字元串轉為 對象
return cookies[key]
}
setInterval(() => {//加入定時器，讓函數每一秒就調用一次，實作頁面重新整理
recMsg1.innerHTML=getKey("msg1")//将msg1的值設定到頁面recMsg1處
recMsg2.innerHTML=getKey("msg2")//将msg2的值設定到頁面recMsg2處
}, 1000);
</script>
</body>
</html>