前端开发--记录VUE中监听sessionStorage变化

1、背景

前段时间项目上有个需求，在菜单栏进行切换应用的时候，页面的数据要进行刷新。如下图所示：

当点击切换顶部的菜单后，下面的内容区域的数据进行刷新。

目前菜单栏的信息我是通过sessionStorage存储到本地的，于是想着如果可以监听sessionStorage的变化， 那么我根据变化去加载页面的数据效果会好很多。

当然了刷新页面也有其它的做法，比如整个页面进行刷新relaod，但是效果太差了。

2、实现

2.1 在main.js中添加全局获取缓存数据

代码语言：javascript复制

// 全局获取缓存数据
Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'menuItem') {
    // 创建一个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, newVal);
  }
},
复制代码

根据自己的需求去设置 "key"

2.2在需要保存数据的地方进行调用

如上图所示，在切换菜单的时候对选中的菜单数据进行保存。

代码语言：javascript复制

 this.resetSetItem("menuItem", JSON.stringify(keyPath));
复制代码

2.3在需要获取选中菜单数据的地方进行sessionStorage变化监听

代码语言：javascript复制

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <label>{{ chooseValue }}</label>
    <router-link :to="{ name: 'HelloWorldTwo' }">jump </router-link>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Hello World One",
      chooseValue: "",
    };
  },
  mounted() {
    window.addEventListener("setItem", this.printLog);
  },
  //页面销毁
  beforeDestroy() {
    window.removeEventListener("setItem", this.printLog);
  },
  methods: {
    printLog() {
      console.log("监听到数据变化");
      this.chooseValue = sessionStorage.getItem("menuItem");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
复制代码

mounted：页面创建的时候添加监听

beforeDestroy： 在页面销毁的时候移除监听

通过上面三步就可以实现监听sessionStorage的变化了。

3 操作效果图

key

0 人点赞