自定义监听事件（存储事件触发）

原创

已于 2022-09-26 10:41:08 修改 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #react #typescript

于 2022-09-26 09:51:38 首次发布

本文介绍了一种自定义监听LocalStorage变动的方法，通过重写setItem方法并触发自定义storageChange事件实现。解决了仅能通过控制台操作触发窗口事件的问题。

用来监听通过代码内修改本地存储或会话存储的内容，window的storage事件触发只能在控制台里清除和修改值触发，在代码里通过set或remove是不会触发的，所以这里希望在代码内修改值也能够被监听到，直接上代码：

 //保留原来的方法
        let originalSetItem = localStorage.setItem
        //重写localstorage.setItem方法
        localStorage.setItem = function (key, value) {
            //创建event
            const event: any = document.createEvent("Event")
            // const event: any = new Event("storageChange")
            event.initEvent("storageChange")
            event.key = key
            event.value = value
            //派发event事件
            document.dispatchEvent(event)
            //调用原来的setItem来设置值
            originalSetItem.apply(this, arguments)
        }

        document.addEventListener("storageChange", function (e: any) {
            console.log(`localstorage改变了:${e.key}----${e.value}`);
        })

        localStorage.setItem("测试", "123456")

自定义storag