1、存储更新监测

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

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

storage事件是注册在window上的。

2、示例

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

test.html文件为：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8.         <title>storage事件</title>
  9.     </head>
  10.  
  11.     <body>
  12.         <script type="text/javascript">
  13.             setTimeout(function(){
  14.                 window.localStorage.setItem('a', 2)
  15.             },1000)
  16.             window.addEventListener("storage", function(e) {
  17.                 console.log(e)
  18.             });
  19.         </script>
  20.     </body>
  21.  
  22. </html>

test1.html文件为：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8.         <title>storage事件</title>
  9.     </head>
  10.  
  11.     <body>
  12.         <script type="text/javascript">
  13.             window.localStorage.setItem('a', 1)
  14.             window.addEventListener("storage", function(e) {
  15.                 console.log(e)
  16.             });
  17.         </script>
  18.     </body>
  19.  
  20. </html>

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

即能监测到localStorage的变化。

3、说明

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

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

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  8.         <title>storage事件</title>
  9.     </head>
  10.  
  11.     <body>
  12.         <script type="text/javascript">
  13.             window.localStorage.setItem('a', 1)
  14.             setTimeout(function(){
  15.                 window.localStorage.setItem('a', 2)
  16.             },2000)
  17.             setTimeout(function(){
  18.                 window.localStorage.setItem('a', 3)
  19.             },3000)
  20.             setTimeout(function(){
  21.                 window.localStorage.setItem('a', 4)
  22.             },4000)
  23.             window.addEventListener("storage", function(e) {
  24.                 console.log(e)
  25.             });
  26.         </script>
  27.     </body>
  28.  
  29. </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. shell基本用法

    shell是一个命令行解释器,它接收应用程序/ 用户命令,然后调用操作系统内核:功能强大的编程语言: 1. Shell解析器 Linux提供的Shell解析器有: [kris@hadoop datas ...

  2. 最短路径(给定一个包含非负整数的 m x n 网格，请找出一条从左上角到右下角的路径，使得路径上的数字总和为最小。 说明：每次只能向下或者向右移动一步。)

    给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 例: 输入: [ [1,3,1], [1,5,1], [ ...

  3. day 58 bootstrap part2

    bootstrap组件的官网, https://v3.bootcss.com/components/#page-header 在bootstrap里面出了HTML和css样式之外还有很多的辅助工具,我 ...

  4. 003.MySQL高可用主从复制新增slave

    一 基础环境 主机名 系统版本 MySQL版本 主机IP master CentOS 6.8 MySQL 5.6 172.24.8.10 slave01 CentOS 6.8 MySQL 5.6 17 ...

  5. Java并发程序设计（一） 基础概念

    Java并发程序设计(一) 基础概念 一.必须知道的几个概念 一)同步(Synchronous)和异步(Asynchronous) 同步:同步方法调用一旦开始,调用者必须等到方法调用返回后,才能继续后 ...

  6. scrapy中间件

    一.下载中间件 from scrapy import signals from scrapy.http import Response from scrapy.exceptions import Ig ...

  7. BZOJ5207 : [Jsoi2017]隧道

    若$\min(n,m)<\min(n+1,m-1)$,则考虑计算左边与右边不连通的概率,然后用$1$减去它得到答案. 若$\min(n,m)\geq \min(n+1,m-1)$,则考虑计算对偶 ...

  8. BZOJ4966 : 总统选举

    线段树维护每个点的最有可能是答案的数以及它的权重. 合并两个节点的时候,将权重互相抵消,保留较大的那一个. 得到答案后,再在对应权值的Treap中查询出现次数,检查是否真正是答案. 时间复杂度$O(n ...

  9. 数据结构 Sunday算法

    Sunday算法是Daniel M.Sunday于1990年提出的字符串模式匹配算法.相对比较KMP和BM算法而言,简单了许多. Sunday算法的思想类似于BM算法中的坏字符思想,有点像其删减版.差 ...

  10. ORM字段操作

    django orm 建表字段 在django modle 中,我们定义的类,他的对象就是数据库表中的一行数据!!! django orm 基础 一:modle的各个字段: 在python中以code ...