カスタムイベントリスニング&localstorageイベントリスニング

文書ディレクトリ

記事参照

カスタムイベント

jsカスタムオブジェクトイベント

カスタム追加localstorageイベントリスニング

カスタムリスニング削除localstorageイベント

記事リファレンス

localStorage変更のリスニング(同ページリスニング)

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