localstorage 更新监测 storage事件
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事件的更多相关文章
- localStorage、sessionStorage详解,以及storage事件使用
有关localStorage和sessionStorage的特性. localStorage本身带有方法有 添加键值对:localStorage.setItem(key,value),如果key存在时 ...
- localStorge它storage事件
随着h5患病率和mobile发展.localStorage它不再是一个陌生的词汇.我相信大多数童鞋进行了联系,并用它.但storage事件相信有很多童鞋不清晰甚至没有接触.今天我们主要谈storage ...
- html5 storage事件
HTML5 虽然很多年了,但是真的了解不不够不够.主题说的是 storage时间,说起对 storage 事件的了解还是从 QQ音乐 说起. QQ音乐的主页是 https://y.qq.com , 而 ...
- storage 事件监听
在公司的一次内部分享会上, 偶然知道了这个H5的新事件, 解决了我之前的一个bug. 事情是这样的, 第A网页上显示的数量的总和, 点击去是B页面, 可以进行管理, 增加或者删除, 当用户做了增删操作 ...
- sessionStorage html5客户端本地存储之sessionStorage及storage事件
可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相识,方 ...
- js页面间通信方法(storage事件)(浏览器页面间通信方法)
在写页面的时候有时会遇到这样的需求,需要两个页面之间传递数据或者一个事件.这个时候,就需要用到我今天所要讲的storage事件,学习这个事件之前,需要先了解localStorage的用法.具体用法可以 ...
- html5客户端本地存储之sessionStorage及storage事件
首先您可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相 ...
- localStore的storage事件
两个浏览器窗口间通信 两个浏览器窗口间通信 补充一下,这里的通讯指遵守同源策略情况下. 为了吸引读者的兴趣,先把demo放到前面:下面有几个我自己写的演示多页面通讯的demo, 为了正常运行,请用 ...
- storage事件 js页面间通信
1.概述 https://developer.mozilla.org/en-US/docs/Web/Events/storage localStorage 或者sessionStorage存储的数据发 ...
随机推荐
- thinkphp5控制器
// 定义应用目录 define('APP_PATH', __DIR__ . '/../app/'); // 定义配置文件目录和应用目录同级 define('CONF_PATH', __DIR__.' ...
- android studio使用CMake和NDK,实现应用自身被卸载时打开某一网址
实现应用自身被卸载时打开某一网址的c代码 MyActivity: public class MyActivity extends Activity { /** * Called when the ac ...
- 关于忘记Jenkins管理员密码的解决办法
一.admin密码未更改情况 1.进入\Jenkins\secrets目录,打开initialAdminPassword文件,复制密码: 2.访问Jenkins页面,输入管理员admin,及刚才的密码 ...
- linux(manjaro)磁盘迁移/opt /home
目录 1. 创建临时挂载点/opt, 并将分区挂载到临时挂载点上: 2. 切换单用户,将除了root用户之外的用户踢出 3. 将/opt目录下的所有内容拷贝到临时挂载点中,等待结束 4. 进入/et ...
- Java NIO- 最好文档
http://www.cnblogs.com/puyangsky/p/5840873.html 1 背景介绍 在上一篇文章中我们介绍了Java基本IO,也就是阻塞式IO(BIO),在JDK1.4版本后 ...
- vue项目的搭建使用
环境变量的安装 参考 环境变量详解 第一次搭建参考 参考 简单初始项目搭建 配置好环境变量的项目的搭建 新建一个new proproject, 查看工作目录vue是否存在 使用查看指令 v ...
- 2017 ACM 字符串的本质
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2017 思路:思考字符串和数字的本质区别是什么. 今天先是试着做了一个完全背包的题目,发现自己还是不会做,弄 ...
- 潭州课堂25班:Ph201805201 django框架 第七课 常用 字段类型及参数,关系表的实现,表关系对象add,create的方法 (课堂笔记)
写个类,创建表格 执行命令生成文件 提交,在数据库中创建 进入数据库查看 对数据进行修改操作 只有用到 save() 才能触发 updaer_time 的更改, 下边 update 方法不会修改 up ...
- K1 K2作为中断源控制红色LED灯,实现任意键按一下LED灯亮或者灭
#include "stm32f10x.h" // 相当于51单片机中的 #include <reg51.h> #include "stm32f10x_gpi ...
- [USACO08OPEN]寻宝之路Clear And Present Danger
OJ题号:洛谷2910 思路:Floyd #include<cstdio> #include<algorithm> using namespace std; int main( ...