随着h5患病率和mobile发展。localStorage它不再是一个陌生的词汇。我相信大多数童鞋进行了联系，并用它。但storage事件相信有很多童鞋不清晰甚至没有接触。今天我们主要谈storage。

看w3c大约storage都描写叙述：

4.4 The storage event

The storage event is fired when a storage area changes, as described in the previous two sections (for session storage, for local storage).

When this happens, the user agent must queue a task to fire an event with the name storage, which does not bubble and is not cancelable, and which uses the StorageEvent interface, at each Window object whose Document object has a Storage object that is affected.

它说得非常清晰，当存储的storage数据发生变化时都会触发它，可是它不同于click类的事件会冒泡和能取消。同一时候最后这句才是重点，storage改变的时候，触发这个事件会调用全部同域下其它窗体的storage事件。只是它本身触发storage即当前窗体是不会触发这个事件的（当然ie这个特例除外，它包括自己本事也会触发storage事件）。

这句话说的有点绕口。看代码把。

DEMO:

页面a下，有个input框用来存储store，它自身绑定了storage事件。这个时候写入新的数据点击保存，这时新的sotre数据保存了，可是页面a的storage事件没触发，

而页面b下，绑定的storage事件则触发了。（ps：前提页面a和b在同域下，并都是打开状态不同窗体）；

页面a代码：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

</head>

<body>

<input type="text" placeholder="input date to save">

<button>save</button>

<script>

  (function(D){

    var val = D.getElementsByTagName("input")[0],

      btn = D.getElementsByTagName("button")[0];

    btn.onclick = function(){

      var value = val.value;

      if(!value) return;

      localStorage.setItem("key", val.value);

    };

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

      console.log(e);

    });

  })(document);

</script>

</body>

</html>

页面b代码：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title></title>

</head>

<body>

<script>

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

    console.log(e);

    document.write("oldValue: "+ e.oldValue + " newValue:" + e.newValue)

  });

</script>

</body>

</html>

看到这里是不是非常疑惑那storage事件究竟有什么用，多窗体间多通信用到它就是最好选择了，比方某块公用内容区域基础数据部分都是从store中提取的，这个区域中大多数页面中都有，当用户打开多个页面时。在当中一个页面做了数据改动。那其它页面同步更新是不是非常方便（当前页面就要用其它方式处理了），当然用于窗体间通信它作用不只如此，很多其它的大家能够利用它特性去发挥。

ps：

顺带补充下，在上面的demo页面b中storage的events对象的属性经常使用的例如以下：

oldValue：更新前的值。假设该键为新添加，则这个属性为null。

newValue：更新后的值。假设该键被删除。则这个属性为null。

url：原始触发storage事件的那个网页的网址。

key：存储store的key名。

另外store虽好可不要贪“杯”噢。大量冗最后但并非不是数据存储灾难更。和store安全性有限，还要注意的是关键数据。

版权声明：本文博客原创文章。博客，未经同意，不得转载。

localStorge它storage事件的更多相关文章

  1. Web Storage事件无法触发

    不管是在同源其他页面还是在本页面都不能触发storage事件. <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  2. sessionStorage html5客户端本地存储之sessionStorage及storage事件

    可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相识,方 ...

  3. localStorage、sessionStorage详解，以及storage事件使用

    有关localStorage和sessionStorage的特性. localStorage本身带有方法有 添加键值对:localStorage.setItem(key,value),如果key存在时 ...

  4. js页面间通信方法（storage事件）（浏览器页面间通信方法）

    在写页面的时候有时会遇到这样的需求,需要两个页面之间传递数据或者一个事件.这个时候,就需要用到我今天所要讲的storage事件,学习这个事件之前,需要先了解localStorage的用法.具体用法可以 ...

  5. html5客户端本地存储之sessionStorage及storage事件

    首先您可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相 ...

  6. html5 storage事件

    HTML5 虽然很多年了,但是真的了解不不够不够.主题说的是 storage时间,说起对 storage 事件的了解还是从 QQ音乐 说起. QQ音乐的主页是 https://y.qq.com , 而 ...

  7. localStore的storage事件

    两个浏览器窗口间通信   两个浏览器窗口间通信 补充一下,这里的通讯指遵守同源策略情况下. 为了吸引读者的兴趣,先把demo放到前面:下面有几个我自己写的演示多页面通讯的demo, 为了正常运行,请用 ...

  8. localstorage 更新监测 storage事件

    1.存储更新监测 存储状态监测的原理是storage事件.storage事件说明: https://developer.mozilla.org/zh-CN/docs/Web/API/StorageEv ...

  9. storage 事件监听

    在公司的一次内部分享会上, 偶然知道了这个H5的新事件, 解决了我之前的一个bug. 事情是这样的, 第A网页上显示的数量的总和, 点击去是B页面, 可以进行管理, 增加或者删除, 当用户做了增删操作 ...

随机推荐

  1. JSP网站开发基础总结《九》(转)

    本篇属于附加篇,在之前的总结中给大家提到过一个关于登录状态验证的效果,当时是通过Session对象完成的,今天我查了一下,JSP为我们封装了一个用于过滤用的过滤器类Filter,通过它我们就可以非常轻 ...

  2. Eclipse上运行Python，使用PyDev

    转自:http://www.ibm.com/developerworks/cn/opensource/os-cn-ecl-pydev/index.html 级别: 初级 郑 伟芳 (zhengwf@c ...

  3. UVA 10820 Send a Table euler_phi功能

    除1,1其他外国x,y不等于 为 x<y 案件 一切y有phi(y)组合 F[x]= phi(i) 2<=i<=x 结果为 2*F[x]+1 Problem A Send a Tab ...

  4. finger用户名、主目录、停滞时间、登录时间

    finger yum install finger    1.作用    finger用来查询一台主机上的登录账号的信息,通常会显示用户名.主目录.停滞时间.登录时间.登录Shell等信息,使用权限为 ...

  5. 用KnockoutJS实现ToDoMVC代码分析

    体验地址 Knockout 版todo web app在线体验 http://todomvc.com/examples/knockoutjs/ 源码地址 项目源码地址,此地址包含了各种JS框架实现的t ...

  6. 提高PHP编程效率的方法

    用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量,单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的“函数”(译注:PHP手册中说 ...

  7. win7提示“ipconfig不是内部或外部命令”

    进入windows环境变量设置->系统变量,找到path,添加C:\Windows\SysWOW64,或者c:\windows\system32

  8. poj 3311 状压DP

    经典TSP变形 学到:1.floyd  O(n^3)处理随意两点的最短路 2.集合的位表示,我会在最后的总结出写出.注意写代码之前一定设计好位的状态.本题中,第0位到第n位分别代表第i个城市,1是已经 ...

  9. 黄聪：Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (高级)

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(三) Validation Application Block (高级) 企业库验证应用程序模块之配置文件模式: ...

  10. 一旦ORA-28000: the account is locked用户锁定故障排除

    今天我的同事们反映的问题,测试库的变化password,并改变相关的应用程序中使用password后,其中一个仍然会出现在帐户被锁定,报告ORA-28000: the account is locke ...