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. P1026 统计单词个数 区间dp

    题目描述 给出一个长度不超过200200的由小写英文字母组成的字母串(约定;该字串以每行2020个字母的方式输入,且保证每行一定为2020个).要求将此字母串分成kk份(1<k \le 401& ...

  2. Best Reward 拓展kmp

    Problem Description After an uphill battle, General Li won a great victory. Now the head of state de ...

  3. 数仓1.4 |业务数仓搭建| 拉链表| Presto

    电商业务及数据结构 SKU库存量,剩余多少SPU商品聚集的最小单位,,,这类商品的抽象,提取公共的内容 订单表:周期性状态变化(order_info) id 订单编号 total_amount 订单金 ...

  4. Centos7使用yum命令安装Mysql5.6.X

    首先:具体的安装步骤在mysql官方文档上都有详细的描述. 文档虽然是英文,不过很容易理解,我就不一一翻译了. 官方文档地址:https://dev.mysql.com/doc/refman/5.6/ ...

  5. 总结几种清除浏览器的缓存，适用于明明已经修改bug，但是测试人员说问题还存在的情况下

    1.meta方法<METAHTTP-EQUIV="pragma"CONTENT="no-cache"><METAHTTP-EQUIV=&quo ...

  6. startActivity进行Hook

    --摘自<android插件化开发指南> 1.Activity的startActivity和Context的startActivity都是在app进程中通知AMS要启动哪个Activity ...

  7. [洛谷P1063][NOIP2006]能量项链

    区间DP模板题 题目描述 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子,前一颗 ...

  8. 牛客练习赛35-背单词-线性DP

    背单词 思路 :dp[ i ]  [ 0 ]表示 第i 位放的元音  dp[ i ]  [ 1 ]表示 第i 位放的辅音 ,cnt [ i ]含义是 长度为 i 的方案数. 转移  :dp[ i ]  ...

  9. webpack打包之有依赖es2015模块

    一.入口文件main.js import { isDepend } from './depend.js'; import { fn } from './depend2.js'; if(isDepend ...

  10. Codeforces.449D.Jzzhu and Numbers(容斥 高维前缀和)

    题目链接 \(Description\) 给定\(n\)个正整数\(a_i\).求有多少个子序列\(a_{i_1},a_{i_2},...,a_{i_k}\),满足\(a_{i_1},a_{i_2}, ...