原理：

　　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. shiro自定义异常无法被捕获总是抛出AuthenticationException解决方案

    这个问题我也是出的莫名其妙,刚开始好好的,然后配置多realm之后出的. 现在直入主题 在继承了 org.apache.shiro.authc.pam.ModularRealmAuthenticato ...

  2. Java设计模式学习笔记(二) 简单工厂模式

    前言 本篇是设计模式学习笔记的其中一篇文章,如对其他模式有兴趣,可从该地址查找设计模式学习笔记汇总地址 正文开始... 1. 简介 简单工厂模式不属于GoF23中设计模式之一,但在软件开发中应用也较为 ...

  3. NetCore + Mysql CodeFirst 生成数据库

    首先定义领域的模型类,然后配置下面的一些东西,最后执行类 1. 新建Context 继承自 DbContext public class EFProjectContext : DbContext { ...

  4. python连接greenplum_postgresql

    1. 场景描述 使用python连接greenplum或者postgresql. 2. 解决方案 2.1 真实代码 2.1.1 调用类 import dbgp as dbgp # 执行 def exe ...

  5. CDQZ集训DAY8 日记

    又一次翻车…… 先提一句昨晚的事.昨天晚上身后一帮成都七中的人用十分戏谑的语气交出了达哥的名字,看着NOI2017的获奖名单,如果他们真的是在嘲笑的话,真的挺想上去干他们一顿的…… 上午考试第一题一脸 ...

  6. Jenkins Ci系列目录

    Jenkins入门篇 1.Jenkins入门之界面概览 2.Jenkins入门之新建任务 3.Jenkins入门之导航操作 4.Jenkins入门之任务基本操作 5.Jenkins入门之执行Power ...

  7. java学习笔记(基础篇)—面向对象编程之封装、继承、多态

    一. OOP中的基本概念 Java的编程语言是面向对象的,采用这种语言进行编程称为面向对象编程(Object-Oriented Programming, OOP), 它允许设计者将面向对象设计实现为一 ...

  8. Excel催化剂开源第43波-Excel选择对象Selection在.Net开发中的使用

    Excel的二次开发有一极大的优势所在,可以结合用户的交互进行程序的运行,大量用户的交互,都是从选择对象开始,用户选择了单元格区域.图形.图表等对象,之后再进行程序代码的加工处理,生成用户所需的最终结 ...

  9. Excel催化剂开源第32波-VSTO开发的插件让WPS顺利调用的方法-注册表增加注册信息

    VSTO插件开发完成后,鉴于现在WPS用户也不少,很多时候用户没办法用OFFICE软件,只能在WPS环境下办公,VSTO开发的插件,只需增加一句注册表信息,即可让WPS识别到并调用VSTO开发的功能, ...

  10. [03] HEVD 内核漏洞之UAF

    作者:huity出处:https://www.cnblogs.com/huity35/p/11240997.html版权:本文版权归作者所有.文章在博客园.个人博客同时发布.转载:欢迎转载,但未经作者 ...