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. hiho一下 第144周(机会渺茫)解题报告及拓展

    题目1 : 机会渺茫 时间限制:5000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi最近在追求一名学数学的女生小Z.小Z其实是想拒绝他的,但是找不到好的说辞,于是提出了这样的要求: ...

  2. poj3660(Cow Contest)解题报告

    Solution: 传递闭包 //if a beats b and b beats c , then a beats c //to cow i, if all the result of conten ...

  3. R语言：多个因变量时，如何在plot函数中画多条曲线（plot,points,lines,legend函数）

    最近阅读一篇文献<Regional and individual variations in the function of the human eccrine sweat gland>, ...

  4. 信号处理——EMD、VMD的一点小思考

    作者:桂. 时间:2017-03-06  20:57:22 链接:http://www.cnblogs.com/xingshansi/p/6511916.html 前言 本文为Hilbert变换一篇的 ...

  5. java程序中加入@SuppressWarnings("serial")是什么意思？

    比如有个类实现了java.io.Serialize接口:package com.onede4.test; public class TestSerial implements java.io.Seri ...

  6. 第一模块：python基础语法

    Python基础[day01]:python介绍发展史(一) Python基础[day01]:Hello World程序(二) Python基础[day01]:表达式if ...else语句(三) P ...

  7. js 数组与字符串的相互转化

    数组转字符串:join() 字符串转数组:split('')

  8. Hbase记录-HBase增删改查

    HBase创建数据   本章将介绍如何在HBase表中创建的数据.要在HBase表中创建的数据,可以下面的命令和方法: put 命令, add() - Put类的方法 put() - HTable 类 ...

  9. Http请求中Content-Type讲解以及在Spring MVC中的应用【转】

    完全引用自: http://blog.csdn.net/blueheart20/article/details/45174399#t1   此文讲得很清晰,赞! 引言: 在Http请求中,我们每天都在 ...

  10. Java线程间和进程间通信

    1 线程与线程间通信 1.1 基本概念以及线程与进程之间的区别联系 关于进程和线程,首先从定义上理解就有所不同: 进程是具有一定独立功能的程序.它是系统进行资源分配和调度的一个独立单位,重点在系统调度 ...