localStorge之storage事件

随着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事件,布布扣,bubuko.com

时间: 2024-10-30 08:05:16

localStorge之storage事件的相关文章

localStorage、sessionStorage详解,以及storage事件使用

有关localStorage和sessionStorage的特性. localStorage本身带有方法有 添加键值对:localStorage.setItem(key,value),如果key存在时,更新value. 获取键值:localStorage.getItem(key),如果key不存在返回null. 删除键值对:localStorage.removeItem(key).key对应的数据将会全部删除. 清除所有键值对:localStorage.clear().如果调用clear()方法

html5 storage事件

HTML5 虽然很多年了,但是真的了解不不够不够.主题说的是 storage时间,说起对 storage 事件的了解还是从 QQ音乐 说起. QQ音乐的主页是 https://y.qq.com , 而实际播放的页面是 https://y.qq.com/portal/player.html.你在其他里面点击播放或者添加的时候,你会发现 https://y.qq.com/portal/player.html 会实时的变化.当前我想,这个神奇啊, 当前想法是如下,可是怎么想都比较low啊. 1. 存入

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

首先您可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相识,方法也几乎一样: 非常通俗易懂的接口: sessionStorage.getItem(key):获取指定key本地存储的值sessionStorage.setItem(key,value):将value存储到key字段sessionStorage.removeItem(key):删除指定key本地存储的值

storage 事件监听

在公司的一次内部分享会上, 偶然知道了这个H5的新事件, 解决了我之前的一个bug. 事情是这样的, 第A网页上显示的数量的总和, 点击去是B页面, 可以进行管理, 增加或者删除, 当用户做了增删操作之后, 返回到A页面的时候不会更新数量, 这个问题困扰了很久 终于等到storage事件, 据说淘宝的购物车就是这么实现的 所以, localStorage的例子运行需要如下条件 同一个浏览器打开了两个同源网页 其中一个网页修改了localStorage 另一个网页注册了storage事件 例子 A

localstorage 更新监测 storage事件

1.存储更新监测 存储状态监测的原理是storage事件.storage事件说明: https://developer.mozilla.org/zh-CN/docs/Web/API/StorageEvent storage事件是注册在window上的. 2.示例 同域下2个文件,分别为test.html和test1.html. test.html文件为: <!DOCTYPE html> <html lang="zh"> <head> <meta

Storage事件及综合案例

说到Storage事件,那么就得先给大家说一下localstorage和sessionstorage: 1.localStorage和sessionStorage一样都是用来存储客户端临时信息的对象. 2.他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现). 3.localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在. 4.sessionStorage生命周期

Web Storage

前面的话 Web存储最初作为HTML5的一部分被定义成API形式,但是后来被剥离出来作为独立的一份标准了.Web存储标准所描述的API包含localStorage对象和sessionStorage对象,这两个对象实际上是持久化关联数组,是名值对的映射表,“名”和“值”都是字符串.Web存储易于使用.支持大容量(但非无限量)数据存储同时兼容当前所有主流浏览器.本文将详细介绍Web Storage 概述 Web Storage的目的是克服由cookie带来的一些限制,当数据需要被严格控制在客户端上时

localStorage变更事件当前页响应新解

html5的localStorage相信大家都是很熟悉了,但是在chrome等支持该对象的浏览器中(ie10除外),如果你监听 storage变更事件你就会发现,当数据发生变化时本页是监听不到storage事件变更消息的.而同域的其他打开的页面反而监听到了该消息.悲剧不? 以上的机制应该是无可厚非的,但是对于单页app或者数据驱动的页面展现来说,这是一个让人抓狂的规事情.awen在开发中为了实现一个纯数据驱动的单页app机制.不得不面对这个问题,经过测试终于实现了本页面locaStorage变更

HTML5分析实战Web存储机制(Web Storage)

Web Storage它是Key-Value在持久性数据存储的形式.Web Storage为了克服cookie把所引起的一些限制.当数据需要严格格控制client准时,没有必要不断地发回数据server. Web Storage有两个目的:提供一种存储会话数据的路径;提供存储大量能够跨会话存在的数据的机制. 最初的Web Storage规范包括了两个对象的定义:sessionStorage对象和globalStorage对象.这两个对象在支持的浏览器中都是以window对象属性的形式存在.支持s