localStorage相信大家都不陌生，今天我们要讨论的不是怎么存储数据，获取数据。而是看看WebStorage的一些妙用，相信大家在开发中遇到过这样一个场景，一个页面中嵌套一个iframe，iframe中填写了一些数据，关闭iframe后，需要通知页面中变化数据，或者触发某个事件。这个需求说难不难，说简单不简单，解决方式也是五花八门，读者可以在评论区留言。我要说的是，用storage事件机制来解决这个问题。

引用《h5移动web开发指南》上的话：

“当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件，就会触发”

所以，localStorage的例子运行需要如下条件：

  • 同一浏览器打开了两个同源页面
  • 其中一个网页修改了localStorage
  • 另一网页注册了storage事件

很容易犯的错误是，在同一个网页修改本地存储，又在同一个网页监听，这样是没有效果的。

例子

网页A：监听了storage事件：

<!DOCTYPE html>

<html>

<head lang="en">

    <title>A</title>

</head>

<body>

    <h1 id="ss"></h1>

<script>

    ss.innerHTML=localStorage.getItem("foo");

    window.addEventListener("storage", function (e) {

        ss.innerHTML=e.newValue;

    });

</script>

</body>

</html>

网页B：修改了localStorage

<!DOCTYPE html>

<html>

<head lang="en">

    <title>B</title>

</head>

<body>

    <div>

        <h3 id="aa">current value: 0</h3>

        <button id="cc">change</button>

    </div>

<script>

    var i=0;

    cc.addEventListener("click",function(){

        localStorage.clear();

        aa.innerHTML="current value: "+i;

        localStorage.setItem('foo', i++);

    })

</script>

</body>

</html>

是不是很神奇？连个标签之间竟然产生了通信。

<!DOCTYPE html>

<html>

<head lang="en">

    <title>A</title>

</head>

<body>

    <h1 id="cc"></h1>

    <button id="change">change</button>

<script>

    localStorage.setItem("xx","val");

    var val=localStorage.getItem("xx");

    cc.innerHTML=val;

    var orignalSetItem = localStorage.setItem;

    localStorage.setItem = function(key,newValue){

        var setItemEvent = new Event("setItemEvent");

        setItemEvent.newValue = newValue;

        window.dispatchEvent(setItemEvent);

        orignalSetItem.apply(this,arguments);

    }

    window.addEventListener("setItemEvent", function (e) {

        cc.innerHTML=e.newValue;

    });

    change.addEventListener("click",function () {

        localStorage.setItem("xx","1234");

    })

</script>

</body>

</html>

这里用到了自定义事件，也是H5新增API

通过iframe方式也可以达到目的

<!DOCTYPE html>

<html>

<head lang="en">

    <title>B</title>

</head>

<body>

    <div>

        <h3 id="aa">current value: 0</h3>

        <button id="cc">change</button>

    </div>

    <iframe src="a.html" frameborder="0"></iframe>

<script>

    var i=0;

    cc.addEventListener("click",function(){

        localStorage.clear();

        aa.innerHTML="current value: "+i;

        localStorage.setItem('foo', i++);

    })

</script>

</body>

</html>

h5新API之WebStorage解决页面数据通信问题的更多相关文章

  1. Android浏览本地 API文档 + 解决页面加载慢的问题

    火狐浏览器安装离线浏览插件: 用浏览器打开index.html文件,你会发现加载的很慢,原因你懂的,为此,我们可以通过离线的方式 查看本地API文档,用火狐浏览器  +   Work Offline插 ...

  2. ES6的新API如Promise,Proxy,Array.form(),Object.assign()等,Babel不能转码, 使用babel-polyfill来解决

    Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy.Reflect.Symbol.Promis ...

  3. H5新特性---Web Worker---Web Stroage

    今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...

  4. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

  5. H5新特性--WebStorage--WebSocke

    今天的目标 3.2:h5新特性--WebStorage localStorage  在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...

  6. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

  7. H5新特性-视频,音频-Flash-canvas绘图

    json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...

  8. H5新标签(适合新手入门)

    H5新标签 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTML5 sublime 输入 html:5 < ...

  9. h5新增加的存储方法

    h4中使用的cookie把用户信息保存在客户端浏览器,但是它受到很多限制. 大小:最多能存储4k 带宽:它是随着http请求一起发送到服务器的,因此浪费一部分的带宽. 复杂度:操作复杂. h5新增加了 ...

随机推荐

  1. zookeeper安装和使用（Windows环境）

    zookeeper安装和使用(Windows环境) 2017年11月27日 10:36:07 董昊炘的博客 阅读数:14785 标签: zookeeperwindows   zookeeper 一.简 ...

  2. dojo.js --dojo Quick Start/dojo入门手册1

    我看了http://www.cnblogs.com/mylem/archive/2009/11/11/1600984.html这篇博客以后 ,就开始设计自己的代码,其实很多解释都是在我的代码里,所以就 ...

  3. 4、Python-列表

    列表格式 # 元素可以是不同类型的 namesList = [1, 'xiaoZhang', 'xiaoHua'] print(namesList[0]) print(namesList[1]) pr ...

  4. python---自定义字段验证

    各个字段类,含正则和验证方法 #字段类 class IPField: REGULAR = "^(25[0-5]|2[0-4]\d|[0-1]?\d?\d)(\.(25[0-5]|2[0-4] ...

  5. mysql用户权限分配专栏

    00x1创建新用户 通过root用户登录之后创建 创建新用户,用户名为testuser,密码为123456 : 1 grant all privileges on *.* to testuser@lo ...

  6. CentOS6.x下源码安装MySQL5.5

    1. 更新yum源:http://www.cnblogs.com/vurtne-lu/p/7405931.html 2. 卸载原有的mysql数据库 [root@zabbix ~]# yum -y r ...

  7. kruskal算法：POJ No.3723 Conscription_最小生成树应用_最大权森林

    #define _CRT_SECURE_NO_WARNINGS /* 5 5 8 4 3 6831 1 3 4583 0 0 6592 0 1 3063 3 3 4975 1 3 2049 4 2 2 ...

  8. Python基础(正则、序列化、常用模块和面向对象)-day06

    写在前面 上课第六天,打卡: 天地不仁,以万物为刍狗: 一.正则 - 正则就是用一些具有特殊含义的符号组合到一起(称为正则表达式)来描述字符或者字符串的方法: - 在线正则工具:http://tool ...

  9. Windows 与 Linux下关于端口不能访问的问题

    自己写的一个HTTP文件服务器,在端口 50000上监听HTTP连接请求,在Eclipse里面将程序正常地启动之后,能够在自己的机器上(Eclipse启动该程序的机器上)访问 50000端口,即Fil ...

  10. UpnP Hacking

    1.概述 通用即插即用(UpnP)是一种用于PC机和智能设备的常见对等网络连接的体系结构. UPnP以Internet标准和技术(例如Tcp/IP.HTTP和XML)为基础,使这样的设备彼此可自动连接 ...