利用localStorage实现浏览器中多个标签页之间的通信
原理：
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实现浏览器中多个标签页之间的通信的更多相关文章
- 利用cookie实现浏览器中多个标签页之间的通信
原理: cookie是浏览器端的存储容器,而且它是多页面共享的,利用cookie多页面共享的特性,可以实现多个标签页的通信. 比如: 一个标签页发送消息(将发送的消息设置到cookie中),一个标签页 ...
- 利用webSocket实现浏览器中多个标签页之间的通信
webSoket用来实现双向通信,客户端和服务端实时通信. webSoket优点和缺点? 优点:对于前端来说,使用简单,功能灵活,如果部署了webSocket服务器,可以实现实时通信. 缺点:需要服务 ...
- 浏览器内多个标签页之间的通信之storage
在一个标签页里面使用 localStorage.setItem(key,value)添加(修改.删除)内容: 在另一个标签页里面监听 storage 事件. 即可得到 localstorge 存储的值 ...
- webdriver高级应用- 浏览器中新开标签页（Tab）
#encoding=utf-8 import unittest from selenium import webdriver import time import win32api, win32con ...
- 实现多个标签页之间通信的几种方法(sharedworker)
效果图.gif prologue 之前在网上看到一个面试题:如何实现浏览器中多个标签页之间的通信.我目前想到的方法有三种:使用websocket协议.通过localstorage.以及使用html ...
- sessionStorage 的数据会在同一网站的多个标签页之间共享吗？这取决于标签页如何打开
一直以来,我所以为的 sessionStorage 的生命周期是这样的:在 sessionStorage 中存储的数据会在当前浏览器的同一网站的多个标签页中共享,并在此网站的最后一个标签页被关闭后清除 ...
- C++ CEF 浏览器中显示 Tooltip(标签中的 title 属性)
在 Windows 中将 CEF 集成到 C++ 客户端以后,默认是无法显示 tooltip 的,比如图片标签中的 title 属性. 实现的方式其实很简单,按下面的步骤操作就可以: 创建一个文本文件 ...
- EasyUI中动态生成标签页
这是最近学到的内容,当时是有思路但是不知道怎么获取当前的点击对象,就没有实现功能,通过更深入的学习,我知道了不仅仅是Java,Oracle中有一个this,同样的EasyUI中也存在一个this,来获 ...
- web前端中实现多标签页切换的效果
在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,ht ...
随机推荐
- Springboot 构建http服务，返回的http行是'HTTP/1.1 200' 无状态码描述 客户端解析错误
————————————————————————————————————————— *** 响应的数据格式 HTTP/1.1 200 OK Server: Apache-Coyote/1.1 A ...
- Json和XML的一些差别
XML: 扩展标记语言,可以用来标记数据.定义数据类型, 优缺点: 1.格式统一,符合标准: 2.容易与其他系统进行远程交互,数据共享比较方便 3.XML文件庞大,文件格式复杂,传输占带宽,较复杂 J ...
- Java缓存机制
1 Java缓存 1.1 jvm内置缓存 Java中实现缓存的方式有很多,比如用static hashMap基于内存缓存的jvm内置缓存,简单不实用,保对象的有效性和周期无法控制,容易造成内存急剧上升 ...
- ali之monkey学习
monkey主要用来进行压力测试,稳定性测试 http://www.cnblogs.com/yyangblog/archive/2011/03/10/1980068.html 1,什么是monkey ...
- node、npm、git版本升级
node版本升级: npm install -g n 或者 npm i -g n --force n stable或者n --stable:安装最近稳定版本 n latest或者n --latest: ...
- 无法加载模块 TP3.2
报错 3.2的路由功能是针对模块设置的,所以URL中的模块名不能被路由,路由定义也通常是放在模块配置文件中. 'MODULE_DENY_LIST' => array('Common','User ...
- Nginx+Php不支持并发，导致curl请求卡死（Window环境）
1.问题描述:项目中开发很多对外接口,于是在本项目中写了测试脚本来验证接口.然鹅,发现Curl请求出现卡死情况,没有响应. 2.具体原因:在window环境下配置的nginx+php环境时,windo ...
- 阶段3 1.Mybatis_11.Mybatis的缓存_3 mybatis一对一实现延迟加载
不用骨架创建项目 复制一对多的代码src下的代码到我们刚才创建的项目里面 把依赖信息复制过来 这里原来实现的功能是立即加载的功能.sql语句是一次性查询的两个表关联的查询. 调整代码 删除Accoun ...
- mysql安装及相关配置
安装下载 第一种 安装mysql安装包 //www.jb51.net/softs/451120.html 保存root密码 打开系统偏好设置,start mysql server #配置mysql e ...
- charles抓包教程
百度搜索下载charles 默认安装即可完成 1.双击charles.exe启动,我的是4.2.7版本.最好下载原版的不要去破解中文,会有不兼容 1.搜索该软件许可证书并输入即可长期使用 2.设置代理 ...