利用cookie实现浏览器中多个标签页之间的通信
Posted javascript9527
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用cookie实现浏览器中多个标签页之间的通信相关的知识，希望对你有一定的参考价值。
原理：
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>
以上是关于利用cookie实现浏览器中多个标签页之间的通信的主要内容，如果未能解决你的问题，请参考以下文章