在一个标签页里面使用 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. php 空格无法替换,utf-8空格惹的祸

    一次坑爹的小bug.读取一段文字(编码utf-8),想替换掉空格,str_replace(" "..).preg_replace("/\s/"..)都不起作用. ...

  2. 用java实现从命令行接收多个数字,求和之后输出结果。

    用java实现从命令行接收多个数字,求和之后输出结果. 1 设计思想: (1)建立类. (2)输出参数个数. (3)定义int型的num和sum,分别用来存储参数和参数的和. (4)用for循环讲参数 ...

  3. 获取当前网页的的url

    如果测试的url地址是http://www.test.com/testweb/default.aspx, 结果如下: Request.ApplicationPath:                / ...

  4. JQuery学习---JQuery基础知识

    JQuery介绍: [官网]http://jquery.com [参考API]http://jquery.cuishifeng.cn/ JQuery的低版本支持IE低版本,JQuery的2版本不太支持 ...

  5. August 07th 2017 Week 32nd Monday

    Life is just a series of trying to make up your mind. 生活只是由一系列下决心的努力所构成. Some people say it is not y ...

  6. 在ASP.NET MVC中,使用Bundle来打包压缩js和css(转)

    转自:http://www.cnblogs.com/xwgli/p/3296809.html 在ASP.NET MVC4中(在WebForm中应该也有),有一个叫做Bundle的东西,它用来将js和c ...

  7. Java Basic Notes——static修饰符

    1.static 在程序中任何变量或者代码都是在编译时由系统自动分配内存来存储的,而所谓静态就是指在编译后所分配的内存会一直存在,直到程序退出内存才会释放这个空间,也就是只要程序在运行,那么这块内存就 ...

  8. 由JDK源码学习HashMap

    HashMap基于hash表的Map接口实现,它实现了Map接口中的所有操作.HashMap允许存储null键和null值.这是它与Hashtable的区别之一(另外一个区别是Hashtable是线程 ...

  9. centos虚拟机安装,配置静态ip可以访问网络

    centos安装过程中需要注意几个问题 1.选择安装的软件 默认选择的是mininal,应该选择GNEME Desktop 安装的过程中可以设置network 配置linux网络命令 具体配置 退出键 ...

  10. 学习python第二天数据库day1

    day01: 关键字:desc 作用:查看表结构(字段名,数据类型&长度) 举例: desc python1808_laoguo; 追加数据到表中:(新增操作) 关键字:insert into ...