[JavaScript知识库]vue 监听 sessionStorage 中值的变化

通过 watch 可以监听vue实例已有属性的变化，那么怎样监听 sessionStorage 中值的变化呢？

使用场景

以角色为例，将当前用户的角色存入 sessionStorage 的 role 中，切换角色后，首先要修改 sessionStorage 中的 role 值，接着需从 sessionStorage 中取出新的 role 值显示在页面上。

重难点： 当 sessionStorage 中的 role 值改变时，需同步更新所有页面的 role 值。

解决方案

使用公共组件封装各个页面对 role 值的显示，并在其中监听 sessionStorage 的变化，实时更新页面的 role 值

核心代码

将 sessionStorage 的变化注册为全局事件 setItem
（ 若想全局使用，则下方代码写在main.js中 ）

import Vue from "vue";

Vue.prototype.setSessionItem = function (key, newVal) {
  // 创建 StorageEvent 事件
  let newStorageEvent = document.createEvent("StorageEvent");
  const storage = {
    setItem: function (k, val) {
      sessionStorage.setItem(k, val);

      // 初始化 StorageEvent 事件
      newStorageEvent.initStorageEvent(
        "setItem", // 事件别名
        false,
        false,
        k,
        null,
        val,
        null,
        null
      );

      // 派发事件
      window.dispatchEvent(newStorageEvent);
    },
  };
  return storage.setItem(key, newVal);
};

在页面创建时添加对 setItem 事件的监听

  mounted() {
    // 添加对 sessionStorage 的监听
    window.addEventListener("setItem", () => {
      this.role = sessionStorage.getItem("role");
    });
  },

在页面销毁时移除对 setItem 事件的监听

  beforeDestroy() {
    // 移除对 sessionStorage 的监听
    window.removeEventListener("setItem", () => {});
  },

完整范例

首次进入页面的效果

点击按钮修改角色后

完整代码如下：

<template>
  <div style="padding: 20px">
    <p>sessionStorage中“role” 的值为 —— {{ role }}</p>

    <el-button type="primary" @click="change"
      >将sessionStorage中“role” 的值改为“管理员”</el-button
    >
  </div>
</template>

<script>
import Vue from "vue";

Vue.prototype.setSessionItem = function (key, newVal) {
  // 创建 StorageEvent 事件
  let newStorageEvent = document.createEvent("StorageEvent");
  const storage = {
    setItem: function (k, val) {
      sessionStorage.setItem(k, val);

      // 初始化 StorageEvent 事件
      newStorageEvent.initStorageEvent(
        "setItem", // 事件别名
        false,
        false,
        k,
        null,
        val,
        null,
        null
      );

      // 派发事件
      window.dispatchEvent(newStorageEvent);
    },
  };
  return storage.setItem(key, newVal);
};
export default {
  data() {
    return {
      role: sessionStorage.getItem("role") || "未定义角色",
    };
  },
  mounted() {
    // 添加对 sessionStorage 的监听
    window.addEventListener("setItem", () => {
      this.role = sessionStorage.getItem("role");
    });
  },
  beforeDestroy() {
    // 移除对 sessionStorage 的监听
    window.removeEventListener("setItem", () => {});
  },
  methods: {
    change() {
      // 修改 sessionStorage 中的值
      this.setSessionItem("role", "管理员");
    },
  },
};
</script>