JS 当前页面监听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事件,当时一头雾水,因为项目没有相关的需求,所以查阅资料后写这篇博客记录一下