vue项目如何监听localStorage或sessionStorage的变化

 更新时间:2021年01月04日 10:42:36   作者:归尘2016  
这篇文章主要介绍了vue 项目如何监听localStorage或sessionStorage的变化,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下

出现这个问题的起因:在一个VUE页面中,引入两个组件,A组件实现基础信息展示,B组件展示列表,我要通过A组件的一个按钮触发状态,然后B组件根据A组件触发的状态来做业务处理,首先想到的是把状态放在localStorage,接下去就是在B组件怎么监听A组件状态

解决方法:

1.首先在 main.js 中给 Vue.protorype 注册一个全局方法,然后创建一个 StorageEvent 方法,当我在执行sessionStorage.setItem(k, val) 的时候,初始化事件并派发事件。

/**
 * @description
 * @author (Set the text for this tag by adding docthis.authorName to your settings file.)
 * @date 2019-05-29
 * @param { number } type 1 localStorage 2 sessionStorage
 * @param { string } key 键
 * @param { string } data 要存储的数据
 * @returns 
 */
Vue.prototype.$addStorageEvent = function (type, key, data) {
  if (type === 1) {
    // 创建一个StorageEvent事件
    var newStorageEvent = document.createEvent('StorageEvent');
    const storage = {
      setItem: function (k, val) {
        localStorage.setItem(k, val);
        // 初始化创建的事件
        newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
        // 派发对象
        window.dispatchEvent(newStorageEvent);
      }
    }
    return storage.setItem(key, data);
  } else {
    // 创建一个StorageEvent事件
    var newStorageEvent = document.createEvent('StorageEvent');
    const storage = {
      setItem: function (k, val) {
        sessionStorage.setItem(k, val);
        // 初始化创建的事件
        newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
        // 派发对象
        window.dispatchEvent(newStorageEvent);
      }
    }
    return storage.setItem(key, data);
  }
}

还有一个简单封装监听localStorage

2.在A组件中调用——写入缓存

this.$addStorageEvent(2, "user_info", data);

或者

this.resetSetItem('watchStorage', jsonObj);

3.在B组件中监听

window.addEventListener('setItem', (e) => {
   console.log(e);
});

或者

window.addEventListener('setItem', ()=> {
    this.newVal = sessionStorage.getItem('watchStorage');
    var data=JSON.parse(this.newVal)
     console.log(data)
})

以上就是vue 项目如何监听localStorage或sessionStorage的变化的详细内容,更多关于vue 项目监听localStorage或sessionStorage的资料请关注脚本之家其它相关文章!

相关文章

  • vue Treeselect 树形下拉框:获取选中节点的ids和lables操作

    vue Treeselect 树形下拉框:获取选中节点的ids和lables操作

    这篇文章主要介绍了vue Treeselect 树形下拉框:获取选中节点的ids和lables操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 如何使用vuex实现兄弟组件通信

    如何使用vuex实现兄弟组件通信

    这篇文章主要给大家介绍了关于如何使用vuex实现兄弟组件通信的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • 记录一个Vue3简易微信右滑删除逻辑的思路实现

    记录一个Vue3简易微信右滑删除逻辑的思路实现

    本文主要介绍了记录一个Vue3简易微信右滑逻辑的思路实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • Vue之mixin混入详解

    Vue之mixin混入详解

    这篇文章主要为大家介绍了Vue之mixin混入,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • Vue中实现权限管理详解

    Vue中实现权限管理详解

    这篇文章主要介绍了Vue中实现权限管理详解,权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源,而前端权限归根结底是请求的发起权,请求的发起可能有下面两种形式触发,需要的朋友可以参考下
    2023-08-08
  • vue.js数据响应式原理解析

    vue.js数据响应式原理解析

    这篇文章主要介绍了vue.js数据响应式原理解析,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
    2022-08-08
  • Vue 前端路由工作原理hash与history的区别

    Vue 前端路由工作原理hash与history的区别

    这篇文章主要介绍了Vue 前端路由工作原理hash与history的区别,文章围绕主题展开vue-router的工作原理的简单介绍,感兴趣的朋友可以学习一下
    2022-07-07
  • webstorm添加*.vue文件支持

    webstorm添加*.vue文件支持

    这篇文章主要介绍了webstorm添加*.vue文件支持,webstorm很多的插件内置,不用安装插件,下面尝试用vue和es6做项目,有兴趣的可以了解一下
    2018-05-05
  • ant-design-vue时间线使用踩坑及解决

    ant-design-vue时间线使用踩坑及解决

    这篇文章主要介绍了ant-design-vue时间线使用踩坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue + iView实现Excel上传功能的完整代码

    Vue + iView实现Excel上传功能的完整代码

    前一段时间项目经历了前端上传文件的过程,首先进入页面会展示默认的样子,选中要上传的excel文件,本文通过实例图文相结合给大家介绍的非常详细,需要的朋友参考下吧
    2021-06-06

最新评论