（可运行代码示例）使用 Proxy 对象实现 localStorage 变化监听

程序员大侠

已于 2024-09-10 12:25:34 修改

阅读量769

点赞数 14

分类专栏： JavaScript 前端文章标签： javascript 前端开发语言

于 2024-09-10 12:25:07 首次发布

本文链接：https://blog.csdn.net/lalala8866/article/details/142095573

版权

前端同时被 2 个专栏收录

79 篇文章 0 订阅

订阅专栏

JavaScript

25 篇文章 0 订阅

订阅专栏

使用 Proxy 对象实现 localStorage 变化监听的代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>LocalStorage Change Event</title>
</head>
<body>
    <button onclick="changeLocalStorage()">Change LocalStorage</button>

    <script>
        // 封装 localStorage 和 Proxy
        const localStorageProxy = new Proxy(localStorage, {
            set: function(target, key, value) {
                // 调用原始 localStorage 的 setItem 方法
                target.setItem(key, value);

                // 触发自定义事件
                const event = new CustomEvent('localStorageChanged', {
                    detail: {
                        key: key,
                        value: value
                    }
                });
                window.dispatchEvent(event);

                // 返回 true 表示操作成功
                return true;
            }
        });

        // 设置初始值
        localStorageProxy.myKey = 'Initial Value';

        // 监听 localStorage 变化
        window.addEventListener('localStorageChanged', function(event) {
            console.log(event.detail.key + ' changed to', event.detail.value);
        });

        // 定义一个函数来改变 localStorage 的值
        function changeLocalStorage() {
            const newValue = 'Value changed at ' + new Date().toISOString();
            localStorageProxy.myKey = newValue;
        }
    </script>
</body>
</html>