监听localStorage变化（同页面监听）

最新推荐文章于 2025-07-03 15:55:31 发布

哎呦喂1111

最新推荐文章于 2025-07-03 15:55:31 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签：监听localStorage变化（同页面监听）

本文链接：https://blog.youkuaiyun.com/qq_31965515/article/details/84553709

web前端专栏收录该内容

203 篇文章

订阅专栏

本文介绍了一种在同源页面中监听localStorage变化的方法，通过重写localStorage的setItem和removeItem方法，并抛出自定义事件来实现跨页面的数据变更通知。具体示例包括添加和删除本地存储项时触发的事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

“当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件，就会触发”

同页面监听，重写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>监听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("本地数据无key值为demo")
        }
    });
    $(".del").click(function () {
        localStorage.removeItem('demo')
    })
</script>
</body>
</html>