浏览器内多个标签页之间的通信之storage
在一个标签页里面使用 localStorage.setItem(key,value)
添加(修改、删除)内容;
在另一个标签页里面监听 storage
事件。
即可得到 localstorge
存储的值,实现不同标签页之间的通信(不同标签页,但可以为同一页面)。
<style>
#data, #fromEvent {
width: 400px;
height: 100px;
border: 1px solid #666;
margin: 50px auto 20px;
padding: 10px;
}
</style>
<div id="data" contenteditable="true"></div>
<div id="fromEvent"></div>
<button id="save">storage</button>
ps: storage事件以file://打开无效,必须在服务器环境下才能成功
浏览器内多个标签页之间的通信之storage的更多相关文章
- 利用cookie实现浏览器中多个标签页之间的通信
原理: cookie是浏览器端的存储容器,而且它是多页面共享的,利用cookie多页面共享的特性,可以实现多个标签页的通信. 比如: 一个标签页发送消息(将发送的消息设置到cookie中),一个标签页 ...
- 利用localStorage实现浏览器中多个标签页之间的通信
原理: localStorage是浏览器存储数据的容器,而且它是多页面共享的,利用localStorage多页面共享的特性,可以实现多个标签页的通信. 比如: 一个标签页发送消息(将发送的消息设置到l ...
- 利用webSocket实现浏览器中多个标签页之间的通信
webSoket用来实现双向通信,客户端和服务端实时通信. webSoket优点和缺点? 优点:对于前端来说,使用简单,功能灵活,如果部署了webSocket服务器,可以实现实时通信. 缺点:需要服务 ...
- 实现多个标签页之间通信的几种方法(sharedworker)
效果图.gif prologue 之前在网上看到一个面试题:如何实现浏览器中多个标签页之间的通信.我目前想到的方法有三种:使用websocket协议.通过localstorage.以及使用html ...
- sessionStorage 的数据会在同一网站的多个标签页之间共享吗?这取决于标签页如何打开
一直以来,我所以为的 sessionStorage 的生命周期是这样的:在 sessionStorage 中存储的数据会在当前浏览器的同一网站的多个标签页中共享,并在此网站的最后一个标签页被关闭后清除 ...
- webdriver高级应用- 浏览器中新开标签页(Tab)
#encoding=utf-8 import unittest from selenium import webdriver import time import win32api, win32con ...
- google浏览器打开新的标签页显示http://www.google.com.hk/url?sa=p&hl=zh-CN&……
chrome的版本:51.0.2704.106 m使用该版本的chrome后,每次打开新标签页,都会提示“无法访问此网站”.并自动跳转到一个地址“http://www.google.com.hk/ur ...
- edge浏览器两个标签页localStorage不同步,解决办法
今天遇到个奇怪的问题,edge两个标签页之间的localStorage值不同步,网上说ie和edge如果想让localStorage值同步,需要主动出发localStorage的change事件 wi ...
- js基础--浏览器标签页隐藏或显示状态 visibility详解
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...
随机推荐
- Integer 和 int 值比较
int 是基本数据类型,会进池,可以使用 == 判断两个值相等 Integer是对象,比较对象不能使用 == , 可以使用Integer.intValue()将取出对象值比较
- 使用button的open-type="getUserInfo"引导用户进行授权
https://blog.csdn.net/weixin_39602178/article/details/80295684 一. 前言 小程序官方文档,上面说明 > wx.getUserInf ...
- Linux常用命令(三)————创建+删除+设置权限
1. mkdir mkdir [选项] DirName 命令中的[选项]: -m 用于对新建目录设置存取权限,也可以用 chmod 命令进行设置. -p 需要时创建上层文件夹(或目录), ...
- 关于webWorker的理解和简单例子
一.理解 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿 ...
- 【2017-11-08】Linux与openCV:opencv版本查看及库文件位置等
1. 查看当前系统中opencv的版本: pkg-config --modversion opencv 可以看到系统中目前存在opencv2.4.9.1及opencv3.2.0两个版本. 不太清楚op ...
- 【2017.10.13 ROS机器人操作系统】ROS系统常用术语及资源
ROS机器人操作系统是一种后操作系统,提供了类似于软件开发中使用到的中间件的功能. ROS: Robot Operating System 机器人操作系统 Package: 功能包 Stack: 功能 ...
- HTTP协议图--与 HTTP 协作的 Web 服务器
HTTP 通信时,除客户端和服务器外,还有一些用于协助通信的应用程序.如下列出比较重要的几个:代理.缓存.网关.隧道.Agent 代理. 1.代理 代理 HTTP 代理服务器是 Web 安全.应用 ...
- Unable to perform unmarshalling at line number 16 and column 63 in RESOURCE hibernate.cfg.xml. Message: cvc-elt.1: 找不到元素 'hibernate-configuration' 的声明。
七月 02, 2017 4:32:37 下午 org.hibernate.Version logVersionINFO: HHH000412: Hibernate Core {5.2.10.Final ...
- ethereumjs/ethereumjs-block-2-api
https://github.com/ethereumjs/ethereumjs-block/blob/master/docs/index.md 详细的调用代码可见本博客的ethereumjs/eth ...
- Monkeyrunner测试环境搭建
Monkey手机APP压力测试,是对手机发送伪随机命令,对手机进行按键,触摸等操作,MonkeyRunner是对其发送重复操作的命令,是Monkey的进阶版,可以设置重复的操作或者是重现步骤等.相比较 ...