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. quartz 关闭不断输出的batch acquisition of 0 triggers ？

    转: spring整合quartz定时器的项目中,如何关闭不断输出的batch acquisition of 0 triggers ? 不断输出的batch acquisition of 0 trig ...

  2. 函数和常用模块【day04】：作用域、局部和全局变量（四）

    本节内容 概述 课前前引 局部变量和全局变量 总结 一.概述 我们之前写代码,都需要声明变量,但是我们思考过变量的作用范围吗?今天我们就来讲讲变量的作用范围,这个作用范围又叫作用域.首先我们根据变量的 ...

  3. java日期相关

    JAVA中获得一个月最大天数的方法 参考博客:http://www.cnblogs.com/relucent/p/4566582.html Calendar 类是一个抽象类,为日历字段之间的转换提供了 ...

  4. sublime js头部代码多行注释

    安装 DocBlockr 插件,在写完function()的时候,在函数上面输入: /** + tab键(或回车键,Atom里不用另外安装插件,直接在函数的上面输入:/** + 回车键  即可).

  5. Hive记录-使用Hue管理Hive元数据

    Hue是一个开源的Apache Hadoop UI系统,由Cloudera Desktop演化而来,最后Cloudera公司将其贡献给Apache基金会的Hadoop社区,它是基于Python Web ...

  6. android kotlin Gradle DSL method not found: '1.2.51()'错误，be using a version of the Android Gradle plug-in that does not contain the method (e.g. 'testCompile' was added in 1.1.0).

    同步的时候遇到这个问题,从log上看是因为gradle的版本不包含kotlin 1.2.51这个method,具体原因我也不是很清楚,大概猜测是kotlin版本的问题,而最新的版本就是1.2.51,所 ...

  7. 使用paramiko远程执行命令、下发文件

    写部署脚本时,难免涉及到一些远程执行命令或者传输文件. 之前一直使用sh库,调用sh.ssh远程执行一些命令,sh.scp传输文件,但是实际使用中还是比较麻烦的,光是模拟用户登陆这一点,还需要单独定义 ...

  8. log4j入门

    日志是应用软件中不可缺少的部分,Apache的开源项目log4j是一个功能强大的日志组件,提供方便的日志记录.在apache网站:jakarta.apache.org/log4j 可以免费下载到Log ...

  9. <algorithm>里的sort函数对结构体排序

    题目描述 每天第一个到机房的人要把门打开,最后一个离开的人要把门关好.现有一堆杂乱的机房签到.签离记录,请根据记录找出当天开门和关门的人. 输入描述: 每天的记录在第一行给出记录的条目数M (M &g ...

  10. Spring第一个helloWorld

    Spring 简介: 轻量级:Spring是非侵入性的-基于Spring开发的应用中的对象可以不依赖于Spring的API 依赖注入(DI—dependdency injection.IOC) 面向切 ...