原理：

　　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>

利用cookie实现浏览器中多个标签页之间的通信的更多相关文章

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

    原理: localStorage是浏览器存储数据的容器,而且它是多页面共享的,利用localStorage多页面共享的特性,可以实现多个标签页的通信. 比如: 一个标签页发送消息(将发送的消息设置到l ...

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

    webSoket用来实现双向通信,客户端和服务端实时通信. webSoket优点和缺点? 优点:对于前端来说,使用简单,功能灵活,如果部署了webSocket服务器,可以实现实时通信. 缺点:需要服务 ...

  3. 浏览器内多个标签页之间的通信之storage

    在一个标签页里面使用 localStorage.setItem(key,value)添加(修改.删除)内容: 在另一个标签页里面监听 storage 事件. 即可得到 localstorge 存储的值 ...

  4. webdriver高级应用- 浏览器中新开标签页（Tab）

    #encoding=utf-8 import unittest from selenium import webdriver import time import win32api, win32con ...

  5. 实现多个标签页之间通信的几种方法(sharedworker)

      效果图.gif prologue 之前在网上看到一个面试题:如何实现浏览器中多个标签页之间的通信.我目前想到的方法有三种:使用websocket协议.通过localstorage.以及使用html ...

  6. sessionStorage 的数据会在同一网站的多个标签页之间共享吗？这取决于标签页如何打开

    一直以来,我所以为的 sessionStorage 的生命周期是这样的:在 sessionStorage 中存储的数据会在当前浏览器的同一网站的多个标签页中共享,并在此网站的最后一个标签页被关闭后清除 ...

  7. C++ CEF 浏览器中显示 Tooltip(标签中的 title 属性)

    在 Windows 中将 CEF 集成到 C++ 客户端以后,默认是无法显示 tooltip 的,比如图片标签中的 title 属性. 实现的方式其实很简单,按下面的步骤操作就可以: 创建一个文本文件 ...

  8. EasyUI中动态生成标签页

    这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是Java,Oracle中有一个this,同样的EasyUI中也存在一个this,来获 ...

  9. web前端中实现多标签页切换的效果

    在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,ht ...

随机推荐

  1. Easy doesn't enter into grown-up life

    Hi xinlu, good afternoon, my name is xx, you can also call me andrew. i'm 31 years old, and i'm from ...

  2. 实现markdown功能

    前言 由于个人一直想弄一个博客网站,所以写博客的功能也就必须存在啦,而之前想过用富文本编辑器来实现的.但是接触了markdown后,发现真的是太好玩了,而且使用markdown的话可以在博客园.CSD ...

  3. ElasticStack学习（八）：ElasticSearch索引模板与聚合分析初探

    一.Index Template与Dynamic Template的概念 1.Index Template:它是用来根据提前设定的Mappings和Settings,并按照一定的规则,自动匹配到新创建 ...

  4. 剖析Unreal Engine超真实人类的渲染技术Part 3 - 毛发渲染及其它

    目录 四.毛发渲染 4.1 毛发的构造及渲染技术 4.1.1 毛发的构造 4.1.2 Marschner毛发渲染模型 4.1.3 毛发的间接光照 4.2 毛发的底层实现 4.3 毛发的材质解析 4.3 ...

  5. Bzoj 3654 图样图森波 题解

    3654: 图样图森破 Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 123  Solved: 66[Submit][Status][Discuss] ...

  6. 每周一个js重要概念之一 调用堆栈

    js写了也有两年多了,大到复杂的后台系统,小到页面,还有日均300万的网页主站,HTML5的适配页面等等. 框架也杂七杂八接触了不少,从小的jquery.bootstrap.echarts等等,到大一 ...

  7. MyBatis从入门到精通(2)：MyBatis XML方式的基本用法

    本章将通过完成权限管理的常见业务来学习 MyBatis XML方式的基本用法 2.1一个简单的权限控制需求 权限管理的需求: 一个用户拥有若干角色,一个角色拥有若干权限,权限就是对某个模块资源的某种操 ...

  8. Java编程思想：文件加锁

    import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; i ...

  9. Java编程思想：XML

    /* 本次实验需要在www.xom.nu上下载XOM类库 */ import nu.xom.*; import java.io.BufferedOutputStream; import java.io ...

  10. 【DFS例题】等式

    题目如下: 这道题依然是一道dfs(要求输出方案数很明显用dfs呐) 首先一个模板贴上来: void dfs()//参数用来表示状态 { if(到达终点状态) { ...//根据题意添加 return ...