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. POJ 3579 Median 【二分答案】

    <题目链接> 题目大意: 给出 N个数,对于存有每两个数的差值的序列求中位数,如果这个序列长度为偶数个元素,就取中间偏小的作为中位数. 解题分析: 由于本题n达到了1e5,所以将这些数之间 ...

  2. 李宏毅机器学习笔记4：Brief Introduction of Deep Learning、Backpropagation(后向传播算法)

    李宏毅老师的机器学习课程和吴恩达老师的机器学习课程都是都是ML和DL非常好的入门资料,在YouTube.网易云课堂.B站都能观看到相应的课程视频,接下来这一系列的博客我都将记录老师上课的笔记以及自己对 ...

  3. tensorflow下基于DNN实现实时分辨人脸微表情

    参加学校的国创比赛的时候,我们小组的项目有一部分内容需要用到利用摄像头实现实时检测人脸的表情,因为最近都在看深度学习方面的相关知识,所以就自己动手实现了一下这个小Demo.参考网上的资料,发现大部分是 ...

  4. 手动实现Promise

    Promise对大家来说并不是很陌生,它是一个异步编程的解决方案,主要解决了前端回调地域问题.用阮老师的话说,它“就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果”. Pro ...

  5. 在web项目中搭建一个spring mvc + spring + mybatis的环境

    介绍:本文中示范搭建一个ssm环境的框架:使用流程就是客户端通过http请求访问指定的接口,然后由服务器接受到请求处理完成后将结果返回. 本项目请求流程细节介绍:由客户端请求到指定的接口,这个接口是个 ...

  6. SpringBoot使用Swagger2实现Restful API

    很多时候,我们需要创建一个接口项目用来数据调转,其中不包含任何业务逻辑,比如我们公司.这时我们就需要实现一个具有Restful API的接口项目. 本文介绍springboot使用swagger2实现 ...

  7. XamarinAndroid组件教程设置动画的时长参数

    XamarinAndroid组件教程设置动画的时长参数 在添加动画的时候,开发者还可以动画参数进行设置,如动画持续的时长.插值器等.下面依次讲解动画参数的设置方法. 1.设置动画时长 设置动画持续的时 ...

  8. JAG Practice Contest for ACM-ICPC Asia Regional 2016.K.Non-redundant Drive(点分治)

    Atcoder vjudge 这标题好长... \(Description\) 给定一棵\(n\)个点的树.在每个点\(i\)你可以补充\(g_i\)的油量,经过一条边需要花费边长的油量.你可以选择从 ...

  9. 英语口语练习系列-C27-艺术品-辨别物体-黄昏的歌

    艺术品 a work of art Theory talent art gallery draw the sketch motivate students' interest full of imag ...

  10. 潭州课堂25班：Ph201805201 django 项目 第三十三课 后台文章标签查询提交到前台，删除功能实现(课堂笔记）

    在视图中创建个类,要实现此功能,并把结果返回前台 , from django.shortcuts import render from django.views import View from dj ...