监听localStorage变化（同页面监听）

“当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件，就会触发”

同页面监听，重写localStorage的方法，抛出自定义事件：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>监听localStorage变化（同页面）</title>
</head>
<body>
<button class="add">add</button>
<button class="del">del</button>
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="crossorigin="anonymous"></script>
<script>var orignalSetItem = localStorage.setItem;localStorage.setItem = function(key,newValue){var setItemEvent = new Event("setItemEvent");setItemEvent.key = key;window.dispatchEvent(setItemEvent);orignalSetItem.apply(this,arguments);};window.addEventListener("setItemEvent", function (e) {if(e.key=='demo'){alert('key值为demo，添加成功');}});$('.add').click(function () {localStorage.setItem("demo","123");})var orignalremoveItem = localStorage.removeItem;localStorage.removeItem = function(key,newValue){var removeItemEvent = new Event("removeItemEvent");removeItemEvent.key = key;window.dispatchEvent(removeItemEvent);orignalremoveItem.apply(this,arguments);};window.addEventListener("removeItemEvent", function (e) {if(localStorage.getItem("demo")){if(e.key=='demo'){alert("key值为demo，删除成功");}}else{alert("本地数据无key值为demo")}});$(".del").click(function () {localStorage.removeItem('demo')})
</script>
</body>
</html>

监听localStorage变化（同页面监听）相关推荐

【js监听报错】页面监听js报错问题
<html> <head> <script type="text/javascript">// 页面监听js报错问题 οnerrοr=handl ...
android 监听图库变化,Android ContentObserver 监听图库变化
电脑环境是XP,软件是gVim7.3,安装在C盘的 Program Files 下.如何设置gVim的字体和背景颜色:C---Program Files---Vim---_vimrc文件,用文本编辑器 ...
vue 组件监听页面切换_vue项目如何监听窗口变化，达到页面自适应？
[自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...
android 监听界面变化,Android之页面有变化用onWindowFocusChanged来监听权限是否开启...
1 问题我们需要在Activity里面监听网络变化.热点是否开启和关闭.GPS服务是否开启.位置权限是否开启等一些列行为. 2 思路方法一: 如果是需要启动activity进行权限申请,我们可以用 ...
父页面监听iframe路由变化_前端路由原理
对于前端路由应该都很熟悉了,开发过spa应用的应该都用过,只是很少人去查一下前端路由实现的原理. 前端路由的实现核心问题有两个,一个是改变url不刷新,另一个是监听url变化.主要靠的就是hash和h ...
js监听html页面大小变化,JS监听窗口变化实时获取浏览器窗口大小
原理:通过监听窗口的变化来动态获取窗口大小用到的方法:addEventListener() 监听window的resize事件 js代码: // 定义事件侦听器函数 function watchWi ...
微信小程序，实现 watch 属性，监听数据变化
转自微信小程序,实现 watch 属性,监听数据变化目标在微信小程序实现 watch 属性,监听 data 中的属性,当被监听属性的值改变时,执行我们指定的方法. 思路 Vue 的 compu ...
Android 第十九课大喇叭--广播机制----动态注册监听网络变化与静态注册实现开机启动
为了便于进行系统级别的消息通知,Android引入了一套广播消息机制. 1.广播机制简介: 因为Android中的每个应用程序都可以对自己感兴趣的广播尽心注册,这样程序只会接收自己所关心的广播内容, ...
reactrouter监听路由变化_一篇文章搞懂前端路由原理解析和实现方式
在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大的路由功能,导致路由实现变的复杂. 想要搞懂路由内部实现还是有些困难的,但是如果只想了解路由实现基本原理 ...

监听localStorage变化（同页面监听）

监听localStorage变化（同页面监听）相关推荐

最新文章

热门文章