利用cookie實現瀏覽器中多個標籤頁之間的通訊
阿新 • • 發佈：2019-08-13
原理：
cookie是瀏覽器端的儲存容器，而且它是多頁面共享的，利用cookie多頁面共享的特性，可以實現多個標籤頁的通訊。
比如： 一個標籤頁傳送訊息（將傳送的訊息設定到cookie中），一個標籤頁接收訊息（從cookie中獲取訊息）
利用cookie+setinterval方式實現的標籤頁通訊優點？
優點：每個瀏覽器都相容
缺點？
cookie有空間限制，每個瀏覽器在每個域名下最多能設定30-50個cookie，容量最多為4k左右。
因為cookie預設攜帶資訊，每次http請求會把當前域名的所有cookie傳送到伺服器上，有用沒用的全發過去，浪費網路寬頻
使用setInterval的頻繁設定重新整理，使頁面不斷的重排重繪，過大的影響到了瀏覽器的效能。
例子：
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>&n