原理：

　　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. Windows下通过VNC远程访问Linux服务器，并实现可视化

    前言 最近因部门需要,老大想让我在公司Linux服务器上弄个Oracle,以用作部门测试环境的数据库服务器,经过一番折腾后,成功完成了任务.因公司Linux服务器是无图形界面的,本人接触Linux不多 ...

  2. 接口文档注解：@ApiOperation

    @ApiOperation不是spring自带的注解是swagger里的 com.wordnik.swagger.annotations.ApiOperation; @ApiOperation和@Ap ...

  3. 不要天真了，这些简历HR一看就知道你是培训的，质量不佳的那种

    上到职场干将下到职场萌新,都会接触到包装简历这个词语.当你简历投到心仪的公司,公司内负责求职的工作人员是如何甄别简历的包装程度的?Jason 老师根据自己的经验写下了这篇文章,谁都不是天才,包装无可厚 ...

  4. java基础——入门篇

    整体大纲图 1.认识java 核心知识点:JVM.搭建Java开发环境.java的发展史.java特点.java程序类型.垃圾收集器.J2SE下载和安装.环境变量的配置和测试.以及简单的开发工具的使用 ...

  5. android_MultiAutoCompleteTextView

    package cn.com.sxp;import android.app.Activity;import android.os.Bundle;import android.view.View;imp ...

  6. Python 爬虫：豆瓣电影Top250，包括电影导演、类型、年份、主演

    结果输出到文本文件中. import codecs import requests from bs4 import BeautifulSoup headers={'User-Agent': 'Mozi ...

  7. CentOS 7离线安装Ansible

    前言 我一直都想成为自动化运维界最亮的仔,奈何自己实力不允许.不过,我一直都在奋斗的路上:这不,最近就在学习自动化运维界的神器--Ansible. 要系统的学习一下Ansible,那就是要先搭建学习环 ...

  8. Excel催化剂开源第30波-在Excel上尽情地使用LINQ

    对于笔者这样的数据分析工作者来说,对数据库有较深的掌握,当然少不了对SQL查询的深度使用,如果在编程的世界中,可以复用这样的能力,真的是一件多么令人高兴的事情. 在.Net的世界中,恰恰提供了这样的能 ...

  9. nginx配置目录访问&用户名密码控制

    背景 项目上需要一些共享目录让外地同事可以网页访问对应的文件,且受权限控制: 现有环境: centos nginx 你可以了解到以下内容: 配置nginx开启目录访问 并配置nginx用户名和密码进行 ...

  10. HashSet源码解读

    一:先看其实现了哪些接口和继承了哪些类 1.实现了Serializable接口,表明它支持序列化. 2.实现了Cloneable接口,表明它支持克隆,可以调用超类的clone()方法进行浅拷贝. 3. ...