JS 当前页面监听localStorage的更新事件

最新推荐文章于 2024-05-11 11:10:02 发布

哎哟喂呀-

最新推荐文章于 2024-05-11 11:10:02 发布

阅读量8.1k

点赞数 7

分类专栏： JavaScript学习文章标签： JavaScript localStorage 监听事件 html5

本文链接：https://blog.csdn.net/weixin_43846071/article/details/103083583

版权

JavaScript学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JS 当前页面监听localStorage的更新事件

不同页面监听localStorage的更新事件
当前页面监听localStorage的更新事件
完整版测试代码

不同页面监听localStorage的更新事件

直接在另一个html页面添加监听事件即可

window.addEventListener("storage", function(e) {
	console.log(e)
});

注意：同域的不同文件会监测到存储值的变化。同一个文件，存储值的变化，监测不到！

当前页面监听localStorage的更新事件

重写localStorage的setItem事件即可（让我想起了vue的双向绑定）

(function(){
	//定义一个变量让setItem函数的值指向它
	let originalSetItem = localStorage.setItem;
	//重写setItem函数
	localStorage.setItem = function(key,newValue){
		//创建setItemEvent事件
		let event = new Event("setItemEvent");
		event.key = key;
		event.newValue = newValue;
		//提交setItemEvent事件
		window.dispatchEvent(event);
		//执行原setItem函数
		originalSetItem.apply(this,arguments);
	}
})();

//添加setItemEvent监听事件
window.addEventListener("setItemEvent", function (e) {
	//监听key为author的localstorage变化
    if(e.key ==='author'){
        let oldValue = localStorage.getItem("author")
        if(oldValue !== e.newValue){
            console.log('localStorage的author值发生改变,由' + 
            	oldValue + '改变为' + e.newValue);
        }else{
            console.log('localStorage的author值' + e.newValue);
        }
    }
});

同理，也可以监听localStorage的删除事件removeItem和获取事件getItem

完整版测试代码

<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
    <meta charset="UTF-8">
    <title>监听本页面localStorage变化</title>
</head>
<body style="height:100%;margin:0;">
<div style="display:flex;height:100%;">
<div style="margin:auto;">
	<button onclick="localStorage.setItem('author','Ning')">添加作者名1</button>
	<button onclick="localStorage.setItem('author','ning')">添加作者名2</button>
	<button onclick="localStorage.removeItem('author')">删除作者名</button>
</div>
</div>
<script>
    (function(){
		//定义一个变量让setItem函数的值指向它
		let originalSetItem = localStorage.setItem;
		//重写setItem函数
		localStorage.setItem = function(key,newValue){
			//创建setItemEvent事件
			let event = new Event("setItemEvent");
			event.key = key;
			event.newValue = newValue;
			//提交setItemEvent事件
			window.dispatchEvent(event);
			//执行原setItem函数
			originalSetItem.apply(this,arguments);
		}
	})();
	
	//添加setItemEvent监听事件
    window.addEventListener("setItemEvent", function (e) {
        //监听key为author的localstorage变化
		if(e.key === 'author'){  
            let oldValue = localStorage.getItem("author")
            if(oldValue !== e.newValue){
                console.log('localStorage的author值发生改变,由' + 
					oldValue + '改变为' + e.newValue);
            }else{
                console.log('localStorage的author值' + e.newValue);
            }
        }
    });
 
    (function(){
		let originalremoveItem = localStorage.removeItem;
		localStorage.removeItem = function(key){
			let event = new Event("removeItemEvent");
			event.key = key;
			window.dispatchEvent(event);
			originalremoveItem.apply(this,arguments);
		}
	})();
	
    window.addEventListener("removeItemEvent", function (e) {
        if(localStorage.getItem("author")){
            if(e.key === 'author'){
                console.log("localStorage的author删除成功");
            }
        }else{
            console.log("localStorage无author值");
        }
    });
</script>
</body>
</html>

之前笔试的时候做过一道问答题就是检测localStorage的update事件，当时一头雾水，因为项目没有相关的需求，所以查阅资料后写这篇博客记录一下

哎哟喂呀-

关注

7
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
JS 当前页面监听localStorage的更新事件

JS 当前页面监听localStorage的更新事件不同页面监听localStorage的更新事件当前页面监听localStorage的更新事件完整版测试代码不同页面监听localStorage的更新事件直接在另一个html页面添加监听事件即可window.addEventListener("storage", function(e) { console.log(e)});注意：同...
复制链接

扫一扫