storage 事件监听

Posted sjpqy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了storage 事件监听相关的知识,希望对你有一定的参考价值。

在公司的一次内部分享会上, 偶然知道了这个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 事件监听的主要内容,如果未能解决你的问题,请参考以下文章

2个浏览器窗口间通信

addeventlistener 监听storage为啥不起作用

JavaFX窗口拖动

c# 获取移动硬盘信息监听移动设备的弹出与插入事件

js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

如何在不监听事件的情况下从 firebase 数据库中检索数据 [重复]