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 按钮居中、按钮居左、按钮居右的实现代码

    Vue 按钮居中、按钮居左、按钮居右的实现代码

    在 Vue 中,如果需要将按钮居中显示,可以使用 CSS 中的 `text-align: center` 属性来实现,本文通过实例代码给大家介绍Vue 按钮居中、按钮居左、按钮居右的实现代码,感兴趣的朋友一起看看吧
    2023-10-10
  • vue使用 vue-socket.io三种方式及踩坑实例解析

    vue使用 vue-socket.io三种方式及踩坑实例解析

    这篇文章主要为大家介绍了vue使用 vue-socket.io三种方式及踩坑实例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue之封装公用变量以及实现方式

    Vue之封装公用变量以及实现方式

    这篇文章主要介绍了Vue之封装公用变量以及实现方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue中的路由跳转及传参的多种方法小结

    Vue中的路由跳转及传参的多种方法小结

    这篇文章主要介绍了Vue中的路由跳转及传参的多种方法小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • vue实现锚点定位功能

    vue实现锚点定位功能

    这篇文章主要为大家详细介绍了vue实现锚点定位功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue中动态Class实战示例

    Vue中动态Class实战示例

    这篇文章主要为大家介绍了Vue中动态Class的实战示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • vue监听浏览器的后退和刷新事件,阻止默认的事件方式

    vue监听浏览器的后退和刷新事件,阻止默认的事件方式

    这篇文章主要介绍了vue监听浏览器的后退和刷新事件,阻止默认的事件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue设置提示和警告弹出框实战案例

    Vue设置提示和警告弹出框实战案例

    页面中会有很多时候需要弹窗提示,下面这篇文章主要给大家介绍了关于Vue设置提示和警告弹出框的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-02-02
  • 详解VUE中v-bind的基本用法

    详解VUE中v-bind的基本用法

    本篇文章主要介绍了详解VUE中v-bind的基本用法 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue接口封装的完整步骤记录

    Vue接口封装的完整步骤记录

    对于中小型企业,vue应用越来越多,学习vue相对于react的成本要低点,入门相对简单。这篇文章主要给大家介绍了关于Vue接口封装的相关资料,需要的朋友可以参考下
    2021-05-05

最新评论