vue实现监听localstorage值变化

2022-10-08 博客 1 415
郑重承诺丨总裁主题提供安全交易、信息保真!
增值服务:
¥ 10优杰币

VIP免费升级VIP

开通VIP尊享优惠特权
立即下载 升级会员

1. 在根目录下创建一个名为utils的文件夹,在文件夹中创建一个tool.js文件

// 重写setItem事件,当使用setItem的时候,触发,window.dispatchEvent派发事件
function dispatchEventStroage() {
    const signSetItem = localStorage.setItem
    localStorage.setItem = function(key, val) {
        let setEvent = new Event('setItemEvent')
        setEvent.key = key
        setEvent.newValue = val
        window.dispatchEvent(setEvent)
        signSetItem.apply(this, arguments)
    }
}

export default dispatchEventStroage;

2. 在main.js中引入使用

import tool from "@/utils/tool";

Vue.use(tool);

3. 在需要监听localstorage中数据变化的文件中加以下代码

window.addEventListener("setItemEvent",function(e){
    //e.key : 是值发生变化的key
    //例如 e.key==="token";
    //e.newValue : 是可以对应的新值
    if(e.key==="token"){
        console.log(e.newValue);
        _this.token=e.newValue;
    }
})
内容查看本文隐藏内容查看价格为10优杰币立即购买,VIP免费
客服qq:1013249407
收藏 (1) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (2)

优杰资源网 博客 vue实现监听localstorage值变化 https://www.lwenl.cn/87.html

vue实现监听localstorage值变化
下一篇:

已经没有下一篇了!

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

  • 0 +

    访问总数

  • 0 +

    会员总数

  • 0 +

    文章总数

  • 0 +

    今日发布

  • 0 +

    本周发布

  • 0 +

    运行天数

你的前景,远超我们想象