在公司的一次内部分享会上, 偶然知道了这个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. netty源码理解（一）：new一个NioEventLoopGroup的时候做了哪些事

    好了,回到构造方法的调用中

  2. 关于 global nonlocal 用法

    # 1 关于 globals() locals() nolocl 还有内置函数的引用## 概念的解释# 命名空间# 1 局部命名空间:每一个函数都有自己的命名空间# 2 全局命名空间:写在函数外的变量 ...

  3. 一种基于SDR实现的被动GSM嗅探

    软件定义无线电(SDR)是一种无线电通信系统,简单来说,就是通过数字信号处理技术在通用可编程数字信号处理硬件平台上,利用软件定义来实现无线电台的各单元功能,从而对无线电信号进行调制.解调.测量.SDR ...

  4. python中闭包

    闭包是指内层函数引用了外层函数的变量(参数也算变量),然后返回内层函数的情况,称为闭包(Closure). 闭包的特点是返回的函数还引用了外层函数的局部变量,所以,要正确使用闭包,就要确保引用的局部变 ...

  5. Diamorphine rootkit的使用

    仅作LKM rootkit研究之用,滥用后果自负. 查看支持版本是否为2.6.x/3.x/4.x: uname -r 下载代码: git clone https://github.com/m0nad/ ...

  6. Vue 之 Vue.nextTick()

    异步更新队列 可能你还没有注意到,Vue 异步执行 DOM 更新.只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会一次 ...

  7. SQL注入之Sqli-labs系列第十四关（基于双引号POST报错注入）

    开始挑战第十四关(Double Injection- Double quotes- String) 访问地址,输入报错语句 '  ''  ')  ") - 等使其报错 分析报错信息 很明显是 ...

  8. SpringMVC详细示例实战教程（较全开发教程）

    SpringMVC学习笔记---- 一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于Spring ...

  9. 正则表达式 —— Cases 与 Tricks

    1. cases 匹配任意单词(两侧可以有多个空格): ( +[a-zA-Z]+ +) 上述表达式无法匹配句子末尾的单词,若想匹配句尾或者逗号前的单词,则可拓展为: ( +[a-zA-Z]+[?,.] ...

  10. Python学习笔记第六周

    目录 一.基础概念 面向对象编程 1.面向对象的几个核心特点 1.class类 2.object对象 3.encapsulation封装 4.inheritance继承 5.polymorphism多 ...