在公司的一次内部分享会上, 偶然知道了这个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. C++中数组定义及初始化

    一.一维数组 静态 int array[100]; 定义了数组array,并未对数组进行初始化 静态 int array[100] = {1,2}: 定义并初始化了数组array 动态 int* ar ...

  2. ios轮播图片用法

    // // ZQRViewController.m // 04-图片轮播器 // // Created by apple on 17-08-24. // Copyright (c) 2017年 zzq ...

  3. Python 实例变量

    class Person: def __init__(self, name, id, gender, birth): self.name = name # 实例变量 对象里的变量 self.id = ...

  4. navicat下载安装和激活一分钟完成

    下载navicat安装包和注册机 下载地址:https://pan.baidu.com/s/1Nakfuv7Z__vLiY6sHNusNg      提取码:v4gz 安装navicat  软件 以管 ...

  5. 第三十二课 linux内核链表剖析

    __builtin_prefetch是gcc扩展的,用来提高访问效率,需要硬件的支持. 在标准C语言中是不允许static inline联合使用的. 删除依赖的头文件,将相应的结构拷贝到LinuxLi ...

  6. 【计算机视觉】KCF算法

    code opencv3.3.1-contrib  ---- TrackerKCF.cpp opencv如何更新目标区域的过程: // calculate filter response if(par ...

  7. directive例子2

    (function() { angular.module('app.widgets') .directive('bsModalPlus', function($window, $sce, $modal ...

  8. [LeetCode&Python] Problem 453. Minimum Moves to Equal Array Elements

    Given a non-empty integer array of size n, find the minimum number of moves required to make all arr ...

  9. 配置Glassfish服务器、部署Java web项目、Maven安装配置及JDK版本匹配性问题

    错误一:在win7上通过命令asadmin start-domain启动Glassfish服务器时报错(如下): Exception in thread "main" java.l ...

  10. cf——Sasha and a Bit of Relax（dp，math）

    关于异或运算,是可以求前缀和的.还有一些异或运算的性质 0^a=a; 交换律 a^b=b^a 结合律 a^(b^c)=(a^b)^c 分配率 a^(b+c)=a^b+a^c 自反律 a^b^b=a 判 ...