监听localStorage变化（同页面监听）
生活随笔
收集整理的這篇文章主要介紹了
监听localStorage变化（同页面监听）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
“當(dāng)同源頁面的某個頁面修改了localStorage,其余的同源頁面只要注冊了storage事件，就會觸發(fā)”?
同頁面監(jiān)聽，重寫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>監(jiān)聽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("本地數(shù)據(jù)無key值為demo")}});$(".del").click(function () {localStorage.removeItem('demo')}) </script> </body> </html>?
總結(jié)
以上是生活随笔為你收集整理的监听localStorage变化（同页面监听）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： localStorage使用总结
- 下一篇： 大数据挑战赛（大佬篇）