利用cookie实现浏览器中多个标签页之间的通信

最新推荐文章于 2024-04-18 20:33:02 发布

aweo960421621

最新推荐文章于 2024-04-18 20:33:02 发布

阅读量2.1k

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/javascript9527/p/javascript9527.html

版权

原理：

　　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>

转载于:https://www.cnblogs.com/javascript9527/p/javascript9527.html

aweo960421621

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用cookie实现浏览器中多个标签页之间的通信

原理：　　cookie是浏览器端的存储容器，而且它是多页面共享的，利用cookie多页面共享的特性，可以实现多个标签页的通信。　　比如：一个标签页发送消息（将发送的消息设置到cookie中），一个标签页接收消息（从cookie中获取消息）利用cookie+setinterval方式实现的标签页通信优点？　　　　优点：每个浏览器都兼容缺点？　　　　cookie有...
复制链接

扫一扫