原理：

　　　　localStorage是浏览器存储数据的容器，而且它是多页面共享的，利用localStorage多页面共享的特性，可以实现多个标签页的通信。

　　　　比如： 一个标签页发送消息（将发送的消息设置到localStorage中），一个标签页接收消息（从localStorage中获取消息）

利用 localStorage 方式实现的标签页通信优点？

　　　　相比cookie，容量大，能存储5M左右内容

　　　　发送请求时，不会默认携带，所以不会将所有内容发送到服务器。

　　　　利用storage事件，实时监听localStorage中的变化，无需再使用定时器

缺陷？

　　      localStorage是H5新特性，兼容性没有cookie好

　　　   localStorage中的storage事件，只能监听非己页面的数据变化，而且不同浏览器中的localStorage的存储大小不一样，一般都是5M左右，IE是1M左右　　　

例子：

　　01　　发送消息的标签页（其实就是将要发送的消息设置到localStorage中）　

<!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>

                        <!-- 这个页面用来发送信息（设置localStorage的值）  -->

      <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语句

                        localStorage.setItem( 'msg1',msg1.value )      //将输入框msg1中的值，设置到localStorage中，并起名为msg1

                        localStorage.setItem( 'msg2',msg2.value )      //将输入框msg2中的值，设置到localStorage中，并起名为msg2 

                  }                                                   

            }

      </script>

</body>

</html>

02　　接收消息的标签页（其实就是从localStorage中获取消息并显示在页面）

<!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>

                  <!-- 这个页面用来接收信息（获取localStorage的值 ） -->

      <h1>收到消息：<span id="recMsg1" ></span></h1>

      <h1>收到消息：<span id="recMsg2" ></span></h1>

      <script>

            // addEventListener 绑定事件监听

            // storage事件，是localStorage特有的事件，只要localStorage中的内容发生改变就会触发该事件（非己页面才能触发）

            render()

            function render(){

                  recMsg1.innerHTML = localStorage.getItem('msg1')//获取localStorage中msg1的值

                  recMsg2.innerHTML = localStorage.getItem('msg2')//获取localStorage中msg2的值

            }

            window.addEventListener('storage',()=>{

                  render()

            })                 

      </script>

</body>

</html>

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

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

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

  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. 【Leetcode】二分法

    题目: 在排序数组中查找元素的第一个和最后一个位置. 二分法的思想非常简单,然而其中的实现细节非常繁琐,容易出错.本推文非常详细地介绍二分法的实现细节. 总结几点注意事项: 初始上.下界的取值: 判断 ...

  2. shell基础练习题

    shell 基础练习题 1.编写脚本/root/bin/systeminfo.sh,显示当前主机系统信息,包括主机名,IPv4地址,操作系统版本,内核版本,CPU型号,内存大小,硬盘大小 #!/bin ...

  3. 看完你也想编写自己的 react 插件

    副标题----为什么我要写这个 react 插件 图片懒加载是项目中常用的功能,然而现有 react 懒加载组件库,用着都不是很爽了 ?.概括一下有如下几点: 没有只针对 image 懒加载组件.多数 ...

  4. hibernate一对一单项关联映射

    一.主键关联 1.两个实体对象的主键一样,以表明它们之间的一一对应关系: 2.不需要多余的外键字段来维护关系,仅通过主键来关联,即Person的主键要依赖IdCard的主键,他们共用一个主键值. Pe ...

  5. Python 写 ACM 题目的一些技巧

    目录 输入输出 input() 输入 split() 用于输入 strip() 输入清理 print() 输入 sort 排序 输入输出 input() 输入 Python3 中 input() 函数 ...

  6. 刃边法计算MTF（ESF、LSF、PSF）

    MTF 调制传递函数 评价一个成像系统目前主流的办法主要有三种TV line检测,MTF检测,和SFR检测. MTF是Modulation Transfer Function的英文简称,中文为调制传递 ...

  7. python - DBUtils 连接池减少oracle数据库的连接数

    问题: 接到需求,告知项目的oracle连接次数过多,对系统造成太过大的负担,要求减少oracle数据库的连接次数 分析: 仔细分析代码以后,发现产生问题的原因,在于之前要求提升oracle监控的监控 ...

  8. c++实验8 哈夫曼编码-译码器

    哈夫曼编码-译码器 此次实验的注释解析多加不少---若对小伙伴们有帮助 希望各位麻烦点个关注 多谢 1.哈夫曼树构造算法为: (1)由给定的n个权值{w1,w2,…,wn}构造n棵只有根结点的二叉树, ...

  9. Delphi XE2 之 FireMonkey 入门(38) - 控件基础: TPopupMenu、TMenuItem、TMenuBar、TMainMenu

    Delphi XE2 之 FireMonkey 入门(38) - 控件基础: TPopupMenu.TMenuItem.TMenuBar.TMainMenu 相关控件: TMenuBar.TPopup ...

  10. app测试和web测试的区别

    单纯从功能测试的层面上来讲的话,APP 测试.web 测试 在流程和功能测试上是没有区别的根据两者载体不一样,则区别如下:1.系统结构方面 web项目,b/s架构,基于浏览器的:web测试只要更新了服 ...