原理：

　　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. 实现markdown功能

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

  2. 网络下载器 EagleGet v2.0.4.60 Full 绿色便携版

    下载地址:点我 基本介绍 EagleGet(亦称 EG Download Accelerator)是一个用于 Windows 系统的下载管理器,它是免费软件.EagleGet 使用多线程技术,支持从Y ...

  3. Elasticsearch（二）集群设置

    Elasticsearch支持多播和单播自动发现节点,但多播已经不被大多数操作系统支持,并且安全性不高,这里主要用单播发现节点,配置如下 discovery.zen.ping.multicast.en ...

  4. [HNOI2012]矿场搭建 题解

    [HNOI2012]矿场搭建 时间限制: 1 Sec  内存限制: 128 MB 题目描述 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出 ...

  5. base16，base32，base64 编码方式的通俗讲解

    作者:林冠宏 / 指尖下的幽灵 博客:http://www.cnblogs.com/linguanh/ GitHub : https://github.com/af913337456/ 腾讯云专栏: ...

  6. java算法题每日一练01，java入门简单算法题小练

    1.给数组做反序 public class Ak01 { public static void main(String[] args) { int[] a = new int[]{22,48,41,2 ...

  7. python之unittest框架实现接口测试实例

    python之unittest框架实现接口测试实例 接口测试的方法有很多种,具体到工具有postman,jmeter,fiddler等,但是工具的局限性是测试数据的组织较差,接口的返回工具的判断有限, ...

  8. eclipse(javaee windows)

    百度云:链接:http://pan.baidu.com/s/1eSoO4s6   密码:54am 官方下载网址:http://www.eclipse.org/downloads/eclipse-pac ...

  9. Java EE.JSP.指令

    JSP的指令是从JSP向Web容器发送消息,它用来设置页面的全局属性,如输出内容类型等. JSP的指令的格式为:<%@ 指令名 属性="属性值"%> 1.page指令 ...

  10. nodejs 如何自动化配置环境参数

    应用场景: 最近用 node 重构了网站的项目,部署到测试环境的时候测试一切正常. 直到有一天,运维把代码上线到内测环境的时候...... 突然发现:内测环境和测试环境竟然是同一台服务器,只不过是把代 ...