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. MyEclipse新建工作空间后的配置详细步骤

    1. General --> Workspace --> UTF-8 2. General --> Editors -->File  Associations --> J ...

  2. ztree删除某个节点下的全部子节点后，父节点图标还是文件夹

    <script type="text/javascript"> //删除节点 zTree.removeNode(treeNode); //获取删除节点的父节点 var ...

  3. MyEclipse导入Maven项目以及Maven转化为Dynamic Web Module（转）

    MyEclipse导入Maven项目(这个博主写的比较详细)https://blog.csdn.net/w12345_ww/article/details/52094756 Maven转化为Dynam ...

  4. ulimit常用参数介绍

    ulimit常用参数介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. ulimit 用于限制 shell 启动进程所占用的资源,支持以下各种类型的限制:所创建的内核文件的大小.进 ...

  5. linux tail -f messages查看控制台失败

    [root@localhost log]# tail -f /var/log/messages ......................... tail: cannot watch `/var/l ...

  6. 面向对象【day08】：反射的最佳实践（三）

    本节内容 1.伪造web框架的路由系统 2.反射函数 3.扩展导入模块 4.企业最佳实践 一.伪造web框架的路由系统 commons.py #!/usr/bin/env python # -*- c ...

  7. Linux记录-进程数和句柄数调整

    1.cat /etc/security/limits.confwebuser soft nofile 65535webuser hard nofile 65535webuser soft nproc ...

  8. linux系统--磁盘管理命令（一）

    一.基本命令 1.1 查看磁盘分区使用状况:df 参数: l:仅显示本地磁盘(默认) a:显示所有文件系统的磁盘使用情况,包括比如 /proc/ h:以1024进制计算最合适的单位显示磁盘容量 H:以 ...

  9. position属性absolute与relative 的区别

    连接:https://www.cnblogs.com/duyanli/p/3534005.html 每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以 ...

  10. [C++]指针/指针数组/数组指针/多维指针/单值指针/多值指针

    int main(){ //单值指针(指向单个值得指针,类同普通变量) int *px = new int; *px = 100; printf("%d",*px); delete ...