在公司的一次内部分享会上, 偶然知道了这个H5的新事件, 解决了我之前的一个bug.

事情是这样的, 第A网页上显示的数量的总和, 点击去是B页面, 可以进行管理, 增加或者删除, 当用户做了增删操作之后, 返回到A页面的时候不会更新数量, 这个问题困扰了很久

终于等到storage事件, 据说淘宝的购物车就是这么实现的

所以, localStorage的例子运行需要如下条件

  • 同一个浏览器打开了两个同源网页
  • 其中一个网页修改了localStorage
  • 另一个网页注册了storage事件

例子

A网页监听了storage事件

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>a</title>

</head>

<body>

<script type="text/javascript">

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

        console.log('storage', e.newValue);

    })

</script>

</body>

</html>

B网页修改了localStorage

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>B</title>

</head>

<body>

<button id="btn">点击</button>

</body>

<script type="text/javascript">

    var btn = document.getElementById('btn');

    btn.onclick = function() {

        localStorage.clear();

        localStorage.setItem('foo', 'bar');

    }

</script>

</html>

运行: 将上面两个网页, 放到同一个服务器上, 在同一个浏览器上打开两个页面, 点击B网页中的按钮, 就会看到A网页中console打印内容

扩展

如果非要在同一个网页中监听怎么办, 可以重写localStorage的方法, 抛出自定义的事件

<!DOCTYPE html>

<html>

<head lang="en">

    <title>A</title>

</head>

<body>

<script>

    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) {

        alert(e.newValue);

    });

    localStorage.setItem("nm","1234");

</script>

</body>

</html>

storage 事件监听的更多相关文章

  1. HTML5 storage事件监听

    引用<h5移动web开发指南>上的话: “当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发” 所以,localStorage  st ...

  2. Java中用得比较顺手的事件监听

    第一次听说监听是三年前,做一个webGIS的项目,当时对Listener的印象就是个"监视器",监视着界面的一举一动,一有动静就触发对应的响应. 一.概述 通过对界面的某一或某些操 ...

  3. 4.JAVA之GUI编程事件监听机制

    事件监听机制的特点: 1.事件源 2.事件 3.监听器 4.事件处理 事件源:就是awt包或者swing包中的那些图形用户界面组件.(如:按钮) 事件:每一个事件源都有自己特点有的对应事件和共性事件. ...

  4. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  5. .NET事件监听机制的局限与扩展

    .NET中把“事件”看作一个基本的编程概念,并提供了非常优美的语法支持,对比如下C#和Java代码可以看出两种语言设计思想之间的差异. // C#someButton.Click += OnSomeB ...

  6. 让 select 的 option 标签支持事件监听（如复制操作）

    这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...

  7. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  8. [No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】

    1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target ...

  9. java 事件监听 - 鼠标

    java 事件监听 - 鼠标 //事件监听 //鼠标事件监听 //鼠标事件监听有两个实现接口 //1.MouseListener 普通的鼠标操作 //2.MouseMotionListener 鼠标的 ...

随机推荐

  1. 缓存一致性协议 mesi

    m : modified e : exlusive s : shared i : invalid 四种状态的转换略过,现在讨论为什么有了这个协议,i++在多线程上还不是安全的. 两个cpu A B同时 ...

  2. MVC4中使用Uploadify3.2

    你使用过 GMail 中附件上传吗?带有上传进度,可以取消正在进行的上传,使用 Uploadify 插件,你也可以做到. Uploadify 是 JQuery 一个著名的上传插件,利用 Flash 技 ...

  3. python文件和文件流操作

    f = open(r'C:\Users\wangxue2\Desktop\somefile.txt', 'w') #r'C:\Users\wangxue2\Desktop\somefile.txt'中 ...

  4. REST easy with kbmMW #20 – OpenAPI and Swagger UI

    即将推出的kbmMW更新不仅是一些bug修正,同时将包含一个新的主要功能:客户端存根生成器框架. 那什么是客户端存根生成器框架呢? 他是一个基于kbmMW smart services,可以生成由各种 ...

  5. Ubantu-Nginx部署

    nginx+uwsgi+django部署流程   当我们在用django开发的web项目时,开发测试过程中用到的是django自带的测试服务器,由于其安全及稳定等性能方面的局限性,django官方并不 ...

  6. 元组类型&字典类型

    一.元组 元组:是一个不可变的列表 用途:当需要记录多个同种属性的值,并且只有读没有改的需求是,这时候应该用到元组 定义方式:在()内用逗号费隔开多个任意类型的元素 ***注意***     当元组只 ...

  7. 解决 canvas 将图片转为base64报错

    var canvas=document.getElementById("canvas"),//获取canvas ctx = canvas.getContext("2d&q ...

  8. NOI-1.1-04输出保留3位小数的浮点数

    04:输出保留3位小数的浮点数 总时间限制:  1000ms 内存限制:  65536kB 描述 读入一个单精度浮点数,保留3位小数输出这个浮点数. 输入 只有一行,一个单精度浮点数. 输出 也只有一 ...

  9. 在django中进行MySQL入库

    在django中进行mysql 入库 需要导入 : from django.db import models   在添加主键时,需要使用:  primary_key=True id = models. ...

  10. 项目报错 exception 'MongoConnectionException' with message 'Failed to connect to: 127.0.0.1:27017: Authentication failed on database 'www' with username 'www': auth failed' in

    出现这个错误,在官方文档也找到了解释,原来在2.6版本做了很大的改进,其改进涉及到核心.存储.网络.查询和安全性等多方面,自然,其用户登录认证机制也发生了改变,db.system.users的sche ...