原理：
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>