在公司的一次内部分享会上, 偶然知道了这个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. pycharm运行pytest

    pycharm运行三种方式 1.以xx.py脚本方式直接执行,当写的代码里面没用到unittest和pytest框架时,并且脚本名称不是以test_开头命名的,此时pycharm会以xx.py脚本方式 ...

  2. leetcode55:跳跃游戏

    解题思路1: 从头往后找每一个为0的元素,判断这个0能够跳过,所有的0都能跳过,则返回True,否则返回False 解题思路2: 从前往后遍历数组,设置一个访问到当前位置i时最远可调到的距离maxle ...

  3. Linux并发执行很简单，这么干就对了

    嗯,就像标题说的那么简单而已 &的并发功能 time for i in `grep server /etc/hosts | awk '{print $1}'`; do (ssh $i &quo ...

  4. [转]JavaScript与元素间的抛物线轨迹运动

    在张鑫旭的博客看到这个抛物线的小动画,觉得很感兴趣,转载一下方便研究~ 原文地址:http://www.zhangxinxu.com/wordpress/?p=3855 在页面上添加元素的位移动画,除 ...

  5. JAVA 线程Join

    join方法: 当某个线程要等待另一个线程执行结束后才能继续执行时,使用join方法. public class DinnerThread { public static void main(Stri ...

  6. C高级第二次PTA作业

    6-7 删除字符串中数字字符 1.设计思路: (1)算法: 第一步:定义一个字符数组item,输入一个字符串赋给字符数组item.调用函数delnum, 第二步:在函数delnum中定义循环变量i=0 ...

  7. 使用Python中的log模块将loss输出到终端与保存到文件

    记得之前对深度学习中得loss输出,经常自己会将输出流重新定向到一个文件中, 比如 python main.py > & | tee log.txt 对于caffe这种c++框架而言,用 ...

  8. linux管道命令之head与tail

    常常会遇到这样的情况: 1.我训练一个模型需要用到很多图片,这些图片都在一个文件夹下面,但是我想仅仅拷贝个一两张看一下图片的质量怎么样? 2.文件夹下有各种各样的数据,数目非常庞大,我想看一下文件夹下 ...

  9. camp待补

    待修莫对 序列自动机 几何积分 沈阳 M 待删除背包  : 分组背包 K-LIS, K次二分(插到最后stop) 问题转化为LIS bzoj2131 hdu4055 最小线段覆盖环 实时路况 分治+f ...

  10. Build Tool（构建工具）

    what: 构建工具能够帮助你创建一个可重复的.可靠的.携带的且不需要手动干预的构建.构建工具是一个可编程的工具,它能够让你以可执行和有序的任务来表达自动化需求.假设你想要编译源代码,将生成的clas ...