1、存储更新监测

存储状态监测的原理是storage事件。storage事件说明：

https://developer.mozilla.org/zh-CN/docs/Web/API/StorageEvent

storage事件是注册在window上的。

2、示例

同域下2个文件，分别为test.html和test1.html。

test.html文件为：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>storage事件</title>

    </head>

    <body>

        <script type="text/javascript">

            setTimeout(function(){

                window.localStorage.setItem('a', 2)

            },1000)

            window.addEventListener("storage", function(e) {

                console.log(e)

            });

        </script>

    </body>

</html>

test1.html文件为：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>storage事件</title>

    </head>

    <body>

        <script type="text/javascript">

            window.localStorage.setItem('a', 1)

            window.addEventListener("storage", function(e) {

                console.log(e)

            });

        </script>

    </body>

</html>

运行2个文件，test1.html的控制台输出为：

即能监测到localStorage的变化。

3、说明

（1）是同域的不同文件会监测到存储值的变化。

（2）同一个文件，存储值的变化，监测不到。如：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>storage事件</title>

    </head>

    <body>

        <script type="text/javascript">

            window.localStorage.setItem('a', 1)

            setTimeout(function(){

                window.localStorage.setItem('a', 2)

            },2000)

            setTimeout(function(){

                window.localStorage.setItem('a', 3)

            },3000)

            setTimeout(function(){

                window.localStorage.setItem('a', 4)

            },4000)

            window.addEventListener("storage", function(e) {

                console.log(e)

            });

        </script>

    </body>

</html>

运行上述文件，控制台没有输出内容。

localstorage 更新监测 storage事件的更多相关文章

  1. localStorage、sessionStorage详解，以及storage事件使用

    有关localStorage和sessionStorage的特性. localStorage本身带有方法有 添加键值对:localStorage.setItem(key,value),如果key存在时 ...

  2. localStorge它storage事件

    随着h5患病率和mobile发展.localStorage它不再是一个陌生的词汇.我相信大多数童鞋进行了联系,并用它.但storage事件相信有很多童鞋不清晰甚至没有接触.今天我们主要谈storage ...

  3. html5 storage事件

    HTML5 虽然很多年了,但是真的了解不不够不够.主题说的是 storage时间,说起对 storage 事件的了解还是从 QQ音乐 说起. QQ音乐的主页是 https://y.qq.com , 而 ...

  4. storage 事件监听

    在公司的一次内部分享会上, 偶然知道了这个H5的新事件, 解决了我之前的一个bug. 事情是这样的, 第A网页上显示的数量的总和, 点击去是B页面, 可以进行管理, 增加或者删除, 当用户做了增删操作 ...

  5. sessionStorage html5客户端本地存储之sessionStorage及storage事件

    可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相识,方 ...

  6. js页面间通信方法（storage事件）（浏览器页面间通信方法）

    在写页面的时候有时会遇到这样的需求,需要两个页面之间传递数据或者一个事件.这个时候,就需要用到我今天所要讲的storage事件,学习这个事件之前,需要先了解localStorage的用法.具体用法可以 ...

  7. html5客户端本地存储之sessionStorage及storage事件

    首先您可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相 ...

  8. localStore的storage事件

    两个浏览器窗口间通信   两个浏览器窗口间通信 补充一下,这里的通讯指遵守同源策略情况下. 为了吸引读者的兴趣,先把demo放到前面:下面有几个我自己写的演示多页面通讯的demo, 为了正常运行,请用 ...

  9. storage事件 js页面间通信

    1.概述 https://developer.mozilla.org/en-US/docs/Web/Events/storage localStorage 或者sessionStorage存储的数据发 ...

随机推荐

  1. 029 c3p0的小测试

    今天被问到这个问题,就实验了一下,后续会继续补充一些配置项的意思. 一:操作步骤 1.大纲 2.新建sql -- ---------------------------- -- Table struc ...

  2. Oracle中start with...connect by子句的用法

    http://www.blogjava.net/xzclog/archive/2010/03/05/314642.html

  3. 树莓派3 B+ 的串口（USART）使用问题

    转载:http://ukonline2000.com/?p=880 最新64位树莓派3已经发布快两周了,玩家们陆陆续续也开始使用上树莓派3了,随着玩家的增多,虽然拥有强大硬件配置的树莓派3也出现了各种 ...

  4. 问题 J: Palindromic Password ( 2018组队训练赛第十五场) (简单模拟)

    问题 J: Palindromic Password 时间限制: 3 Sec  内存限制: 128 MB提交: 217  解决: 62[提交][状态][讨论版][命题人:admin] 题目描述 The ...

  5. provisional headers are shown 知多少

    前言 请求里面provisional headers are shown(显示临时报头) 出现的情况很多,但原因是多样的. 如果你去直接匹配关键字搜索,得到的结果可能与你自己的情况大相径庭. 网上大部 ...

  6. Java 浮点数精度丢失

    Java 浮点数精度丢失 问题引入 昨天帮室友写一个模拟发红包抢红包的程序时,对金额统一使用的 double 来建模,结果发现在实际运行时程序的结果在数值上总是有细微的误差,程序运行的截图: 输入依次 ...

  7. BZOJ-4-2038: [2009国家集训队]小Z的袜子(hose)-莫队

    思路 :分块 思想 处理离线查询操作  对查询进行排序 在同一块内的按照 r 进行排序 不同块 的按照 L进行排序. #include<bits/stdc++.h> using names ...

  8. Xamarin Essentials教程安全存储SecureStorage

    Xamarin Essentials教程安全存储SecureStorage   在实际应用中,应用程序会将一些数据保存在用户设备中,避免用户重复操作.但是为了防止因设备丢失或者感染病毒导致数据泄漏,需 ...

  9. webpack打包之无依赖模块

    一.入口文件main.js // main.js console.log('webpack'); 二.出口文件bundle.js 1.浏览代码 2.本质 // 实际就是一个自执行函数 (functio ...

  10. docker -v挂载

    docker run -d -p 3306:3306 -v /var/lib/mydata:/var/lib/mysql  my_sql docker exec -it mys_sql /bin/ba ...