0
点赞
收藏
分享

微信扫一扫

如何监听 LocalStorage 的变化【storage 事件】 跨页面通信

爪哇驿站 2022-04-02 阅读 65

场景:当涉及到同时打开多个tab页,操作一个tab,希望其他的tab也会同时进行更新状态。

原理就是前度的跨页面通信

一、当 LocalStorage 变化时,会触发storage事件。

在需要改变的页面增加时间监听:

window.addEventListener('storage', function (e) {
    if (e.key === 'ctc-msg') {
        const data = JSON.parse(e.newValue);
        const text = '[receive] ' + data.msg + ' —— tab ' + data.from;
        console.log('[Storage I] receive message:', text);
    }
});

二、调用 window.localStorage.setItem() 触发更新。

这里需要注意,当两次 setItem 更新的值一样时,监听方法是不会触发的。

参考链接:https://juejin.cn/post/6844903811232825357

举报

相关推荐

0 条评论