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. Noj - 在线强化训练1

      1445 A 求n个整数的和   1564 B 判断一个数是否是完全数   1011 C 判素数(Prime number)   1566 D 输入一组整数,找出最小值   1200 E 判断三角 ...

  2. mysql order by多个字段

    Mysql order by 多字段排序 mysql单个字段降序排序: select * from table order by id desc; mysql单个字段升序排序: select * fr ...

  3. 在jsp页面上方定义<style> 可以自定义class的样式

    <style>.border-orange{ border:1px solid orange; width:120px; box-sizing: border-box; margin-bo ...

  4. XX-NET史上最详细完整教程

     转 https://www.cnblogs.com/phperkang/p/8780123.html 前言 XX-NET,系GAE类代理,即通过可用Google ip连接Google App Eng ...

  5. poj 2528 Mayor’s posters 【离散化】+【线段树】

    <题目链接> 题目大意: 往一堵墙上贴海报,依次输出这些海报张贴的范围,这些海报能够相互覆盖,问最后能够看见几张海报? 解题分析: 由于是给出每张海报的区间,所以在这些区间内的很多点可能用 ...

  6. python & MySQLdb(Three)

    #实现python封装 # encoding=utf8 import MySQLdb #定义类 class MysqlHelper(): def __init__(self,host,port,db, ...

  7. MD5_Util工具类代码

    package com.yby.mall.utils; import java.math.BigInteger; import java.security.MessageDigest; public ...

  8. 谈谈《Dotnet core结合jquery的前后端加密解密密码密文传输的实现》一文中后端解密失败的原因

    详情请看<Dotnet core结合jquery的前后端加密解密密码密文传输的实现>,正常来讲,这个博客里面的代码是没有问题的,但是我有时候却会直接报错,原因是后台解密失败:Interna ...

  9. iOS12系统应用发送普通邮件构建邮件

    iOS12系统应用发送普通邮件构建邮件 当确定设备支持邮件发送功能后,开发者就可以实现该功能.根据是否包含附件,邮件可以分为普通邮件和附件邮件两种.本节首先讲解如何发送普通邮件.实现过程如下: 1.构 ...

  10. jquery 1.7.2源码解析（二）构造jquery对象

    构造jquery对象 jQuery对象是一个类数组对象. 一)构造函数jQuery() 构造函数的7种用法: 1.jQuery(selector [, context ]) 传入字符串参数:检查该字符 ...