在公司的一次内部分享会上, 偶然知道了这个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. 201621123001 《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰 ...

  2. Problem D: 求(x-y+z)*2

    Description 编写一个程序,求解以下三个函数: f(x,y,z)=2*(x-y+z) f(x,y)  =2*(x-y) f(x)    =2*(x-1) 函数调用格式见append.cc. ...

  3. SharePoint REST API - 概述

    博客地址:http://blog.csdn.net/FoxDave SharePoint REST API不同于传统的Server Object Model和Client Object Model ...

  4. SharePoint Framework 把你的客户端web部件连接到SharePoint

    博客地址:http://blog.csdn.net/FoxDave 把你的web部件连接到SharePoint来访问SharePoint中的功能和数据,为终端用户提供更完整的体验.本篇会基于之前构 ...

  5. shiro学习（三）权限 authenrication

    主体 主体,即访问应用的用户,在Shiro中使用Subject代表该用户.用户只有授权后才允许访问相应的资源. 资源 在应用中用户可以访问的任何东西,比如访问JSP页面.查看/编辑某些数据.访问某个业 ...

  6. 【转】CEF3加载网页---多字节字符集和UNICODE字符集

    static char* MBSCToCEF(const char* mbcsStr) { wchar_t* wideStr; char* utf8Str; int charLen; charLen ...

  7. jetty调优

    jetty服务器使用遇到一下内存溢出的问题: java.lang.OutOfMemoryError: unable to create new native thread   无法创建新的进程 方法: ...

  8. error_log

    对于我们做php开发的人员,上了生产环境,一定要把相关debug,display_errors错误提示等关掉.谁还难免不犯个错呢?这样能防止非致命性报错下,导致项目路径.数据库等信息泄漏. 问:那么问 ...

  9. 2019-04-01-day023-对象实例的反射实例化

    学习方法 学练改管测 听别人说 读 input 自己说 自己写 output 解决语法错误 解决逻辑错误 ##内容回顾 ##继承 多态 封装 property classmethod staticme ...

  10. Python Algorithms – chapter3 计数初步

    一些基本递归式的解决方案及其应用实例 主定理的三种情况 排序算法之侏儒排序法 def gnomesort(seq): i = 0 while i < len(seq): if i == 0 or ...