在一个标签页里面使用 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>
 
var addEvent = (function() {
  if (document.addEventListener) {
    return function(el, type, fn) {
      if (el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      } else {
        el.addEventListener(type, fn, false);
      }
    };
  } else {
    return function(el, type, fn) {
      if (el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      } else {
        el.attachEvent('on' + type,
        function() {
          return fn.call(el, window.event);
        });
      }
    };
  }
})();
 
var dataInput = document.getElementById('data'),
   output = document.getElementById('fromEvent'),
   save = document.getElementById('save');
addEvent(window, 'storage', function (event) {
  if (event.key == 'storage-event-test') {
    output.innerHTML ="key:"+event.key+" ---- old:"+event.oldValue+" ---- new:"+ event.newValue;
  }
});
addEvent(save, 'click', function () {
  localStorage.setItem('storage-event-test', dataInput.innerHTML);
});

ps: storage事件以file://打开无效,必须在服务器环境下才能成功

浏览器内多个标签页之间的通信之storage的更多相关文章

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

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

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

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

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

    webSoket用来实现双向通信,客户端和服务端实时通信. webSoket优点和缺点? 优点:对于前端来说,使用简单,功能灵活,如果部署了webSocket服务器,可以实现实时通信. 缺点:需要服务 ...

  4. 实现多个标签页之间通信的几种方法(sharedworker)

      效果图.gif prologue 之前在网上看到一个面试题:如何实现浏览器中多个标签页之间的通信.我目前想到的方法有三种:使用websocket协议.通过localstorage.以及使用html ...

  5. sessionStorage 的数据会在同一网站的多个标签页之间共享吗?这取决于标签页如何打开

    一直以来,我所以为的 sessionStorage 的生命周期是这样的:在 sessionStorage 中存储的数据会在当前浏览器的同一网站的多个标签页中共享,并在此网站的最后一个标签页被关闭后清除 ...

  6. webdriver高级应用- 浏览器中新开标签页(Tab)

    #encoding=utf-8 import unittest from selenium import webdriver import time import win32api, win32con ...

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

  8. edge浏览器两个标签页localStorage不同步,解决办法

    今天遇到个奇怪的问题,edge两个标签页之间的localStorage值不同步,网上说ie和edge如果想让localStorage值同步,需要主动出发localStorage的change事件 wi ...

  9. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

随机推荐

  1. Integer 和 int 值比较

    int 是基本数据类型,会进池,可以使用 == 判断两个值相等 Integer是对象,比较对象不能使用 == , 可以使用Integer.intValue()将取出对象值比较

  2. 使用button的open-type="getUserInfo"引导用户进行授权

    https://blog.csdn.net/weixin_39602178/article/details/80295684 一. 前言 小程序官方文档,上面说明 > wx.getUserInf ...

  3. Linux常用命令(三)————创建+删除+设置权限

    1. mkdir mkdir [选项] DirName 命令中的[选项]: -m    用于对新建目录设置存取权限,也可以用 chmod 命令进行设置. -p     需要时创建上层文件夹(或目录), ...

  4. 关于webWorker的理解和简单例子

    一.理解 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿 ...

  5. 【2017-11-08】Linux与openCV:opencv版本查看及库文件位置等

    1. 查看当前系统中opencv的版本: pkg-config --modversion opencv 可以看到系统中目前存在opencv2.4.9.1及opencv3.2.0两个版本. 不太清楚op ...

  6. 【2017.10.13 ROS机器人操作系统】ROS系统常用术语及资源

    ROS机器人操作系统是一种后操作系统,提供了类似于软件开发中使用到的中间件的功能. ROS: Robot Operating System 机器人操作系统 Package: 功能包 Stack: 功能 ...

  7. HTTP协议图--与 HTTP 协作的 Web 服务器

    HTTP 通信时,除客户端和服务器外,还有一些用于协助通信的应用程序.如下列出比较重要的几个:代理.缓存.网关.隧道.Agent 代理. 1.代理   代理 HTTP 代理服务器是 Web 安全.应用 ...

  8. 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 ...

  9. ethereumjs/ethereumjs-block-2-api

    https://github.com/ethereumjs/ethereumjs-block/blob/master/docs/index.md 详细的调用代码可见本博客的ethereumjs/eth ...

  10. Monkeyrunner测试环境搭建

    Monkey手机APP压力测试,是对手机发送伪随机命令,对手机进行按键,触摸等操作,MonkeyRunner是对其发送重复操作的命令,是Monkey的进阶版,可以设置重复的操作或者是重现步骤等.相比较 ...