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. P1074 靶形数独 dfs回溯法

    题目描述 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z 博士请教,Z 博士拿出了他最近发明的“靶 ...

  2. 有了这些，java IO就不愁了

    IO的总结: java中相对路径和绝对路径的问题: 在web项目中,如果生成的文件前面没有 / 开头的话,表示的是生成的文件在当前项目的根目录下如student.txt在项目中刷新就能看到. 如果是以 ...

  3. count()函数在count()中参数的讨论

    http://www.cnblogs.com/CareySon/p/DifferenceBetweenCountStarAndCount1.html

  4. Raspberry 音乐播放器omxplayer安装

    首先需要安装的是omxplayer播放器的依赖的库文件: wget http://pexpect.sourceforge.net/pexpect-2.3.tar.gz tar xzf pexpect- ...

  5. 爬虫之 beautifusoup4

    1. 使用方法 2.解析器 3. 详细用法 4. find_all方法 5. 遍历文档树

  6. 电信项目java补充类

    一.DecimalFormat 1.概述 public class DecimalFormat extends NumberFormat DecimalFormat是格式为十进制数的NumberFor ...

  7. eclipse tomcat报Several ports(8005 8080 8009)端口被占用问题解决方案

    在启动tomcat的时候eclipse突然报错 Several ports (8005,8080,8009) required by Tomcat v6.0 Server at localhost a ...

  8. EF Core使用CodeFirst在MySql中创建新数据库以及已有的Mysql数据库如何使用DB First生成域模型

    官方教程:https://docs.microsoft.com/en-us/aspnet/core/data/?view=aspnetcore-2.1 使用EF CodeFirst在MySql中创建新 ...

  9. 翻转长方形 (不知名oj中一道个人私题）--单调栈维护最大子矩形

    怎么分析这道题呢? 首先 ,我们注意到一点: 不管怎么操作,任意一个2*2方格中的 "#"个数的奇偶性是不变的. 所以,如果一个2*2方格中有奇数个"#",这个 ...

  10. MySQL环境变量的配置

    找到mysql安装的bin目录下复制此路径: 我的电脑右击属性====>>高级系统设置==>>环境变量 找到path 单击编辑将路径粘贴到变量值的最前面,在bin后面加上英文的 ...