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. 2018.10.2浪在ACM 集训队第二次测试赛

    2018.10.26 浪在ACM 集训队第二次测试赛 题目一览表 来源 考察知识点 A 1273 海港 NOIP 普及组 2016 差分数组+二分 B 1274 魔法阵     C 1267 金币   ...

  2. QtCreator添加第三方头文件和类库

    在Qt Creator的项目中添加头文件和库 在Qt Creator中的工程中,工程通过.pro文件管理. 额外需要连接的连接库 unix:LIBS += -L your_lib_path -lyou ...

  3. git 线上回滚问题纪要

    1. git revert 作用 revert 用来取消置顶的提交的内容 2. 前提说明 当讨论 revert 时,需要分两种情况,因为 commit 分为两种: 一种是常规的 commit,也就是使 ...

  4. 怎样解决Myeclipse内存溢出？

    打开myeclipse 10安装目录下的myeclipse.ini文件 打开文件,将文件圈圈中的内容设置如下图: 上面是其中一种解决方案,下面介绍第二种解决方案 设置Default VM Argume ...

  5. parted分区工具用法

    parted分区工具用法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 随着生产环境中数据量的增大,我们对硬盘的容量也有很大的需求,当硬盘的容量大于2T(工业上的最大磁盘2.2TB ...

  6. JVM总结（六）：早期（编译期）优化

    这节我们来总结一下JVM编译器优化问题. JVM编译器优化 Javac编译器 Javac的源码和调试 解析与填充符号表 注解处理器 语法分析与字节码生成 Java语法糖 泛型和类型擦除 自动装箱.拆箱 ...

  7. Swift学习笔记5

    1.你可以将一个继承来的只读属性重写为一个读写属性,只需要在重写版本的属性里提供 getter 和 setter 即可.但是,你不可以将一个继承来的读写属性重写为一个只读属性. 2.你可以通过把方法, ...

  8. reids的主从复制配置

    本博来简单介绍一下redsi的主从配置.意思就是说有一台主redis,一个从redis,你向主的redis里面写一个数据,然后会同步到从redis里面.注意:从redis 不能写入数据.所以当我们用到 ...

  9. 四种常见的 POST 提交数据方式（application/x-www-form-urlencoded，multipart/form-data，application/json，text/xml）

    四种常见的 POST 提交数据方式(application/x-www-form-urlencoded,multipart/form-data,application/json,text/xml) 转 ...

  10. 同步、异步、阻塞、非阻塞与future

    前言 随着移动互联网的蓬勃发展,手机App层出不穷,其业务也随之变得错综复杂.针对于开发人员来说,可能之前的一个业务只需要调取一次第三方接口以获取数据,而如今随着需求的增加,该业务需调取多个不同的第三 ...