多页面通信之监听storage

最新推荐文章于 2025-02-21 22:36:35 发布

脱缰的哈士奇

最新推荐文章于 2025-02-21 22:36:35 发布

阅读量880

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 js 文章标签：页面通信监听storage 前端 storage localstorage

本文链接：https://blog.csdn.net/qq_39658827/article/details/103374867

本文探讨了利用storage进行多页面通信的方法，重点在于如何监听storage的变化。不仅讲解了如何监听同源非同一页面的storage事件，还介绍了在同一个页面内部改写原生storage方法，通过装饰者模式抛出自定义事件来实现storage变化的监听。

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

多个页面通信有很多方法，其中之一便是使用storage。

storage只能够监听同源非同一页面中的storage变化，如果想监听同一个页面的storage变化，我们需要改写原生方法（应用了装饰者模式），抛出自定义事件来监听storage的变化。

1.监听同源页面storage变化：

ps:如何产生同源页面，可以在一个文件夹下定义两个html，由一个html通过href跳转到另一个html即可。

    window.addEventListener('storage',function(e){
            console.log(`键:${e.key},旧值${e.oldValue},新值：${e.newValue})`);
        });

2.监听同一个页面中storage的变化：

    var originalSetItem=localStorage.setItem;//保存元素setItem方法
        localStorage.setItem=function(key,value){  //改写
            let setItemEvent=new Event('setItemEvent'); //自定义事件
            setItemEvent.key=key;  
            setItemEvent.value=value;
            window.dispatchEvent(setItemEvent); //派发事件
            orig