自定义事件监听&localstorage事件监听

文章参考

1. 监听localStorage变化（同页面监听）
2. 漫谈js自定义事件、DOM/伪DOM自定义事件

自定义事件

// e 代表触发的事件对象
window.addEventListener("huangbiao", function (e) {
    console.log(arguments);
    debugger
    if (e.myAttr === "demo") {
        alert("key值为demo，添加成功！")
    }
}, false)
// 创建一个事件对象，名字为 huangbiao
let hbEventObj = new Event("huangbiao")
// 给事件对象添加一个属性，叫做 myAttr
hbEventObj.myAttr = "demo"
// 触发事件
window.dispatchEvent(hbEventObj)

js 自定义对象事件

自定义添加localstorage事件监听

// 缓存原来“保存数据”方法对象
var orignalSetItem = localStorage.setItem;
// 覆盖原来“保存数据”的方法
localStorage.setItem = function(key,newValue){
    // 创建一个自定义事件对象，名字为 setItemEvent
    var setItemEvent = new Event("setItemEvent");
    // 给事件添加属性
    setItemEvent.newValue = newValue;
    // 触发事件
    window.dispatchEvent(setItemEvent);
    // 触发原来的 localStorage存储 数据的方法,这个是关键，不能使用 localStorage.setItem方法，否则死循环，会内存溢出的
    orignalSetItem.apply(this,arguments);
}
window.addEventListener("setItemEvent", function (e) {
    alert(e.newValue);
});
localStorage.setItem("name","wang");

触发原来的 localStorage存储 数据的方法,这个是关键，不能使用 localStorage.setItem方法，否则死循环，会内存溢出的

自定义监听删除localstorage 事件

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")
	}
}