vue監(jiān)聽sessionStorage中值的變化方式

更新時間：2024年07月27日 08:41:23 作者：朝陽39

這篇文章主要介紹了vue監(jiān)聽sessionStorage中值的變化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

使用場景

以角色為例，將當前用戶的角色存入 sessionStorage 的 role 中，切換角色后，首先要修改 sessionStorage 中的 role 值，接著需從 sessionStorage 中取出新的 role 值顯示在頁面上。

重難點：

當 sessionStorage 中的 role 值改變時，需同步更新所有頁面的 role 值。

解決方案

使用公共組件封裝各個頁面對 role 值的顯示，并在其中監(jiān)聽 sessionStorage 的變化，實時更新頁面的 role 值

核心代碼

將 sessionStorage 的變化注冊為全局事件 setItem

（若想全局使用，則下方代碼寫在main.js中）

import Vue from "vue";

Vue.prototype.setSessionItem = function (key, newVal) {
  // 創(chuàng)建 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
      );

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

在頁面創(chuàng)建時添加對 setItem 事件的監(jiān)聽

  mounted() {
    // 添加對 sessionStorage 的監(jiān)聽
    window.addEventListener("setItem", () => {
      this.role = sessionStorage.getItem("role");
    });
  },

在頁面銷毀時移除對 setItem 事件的監(jiān)聽

  beforeDestroy() {
    // 移除對 sessionStorage 的監(jiān)聽
    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) {
  // 創(chuàng)建 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
      );

      // 派發(fā)事件
      window.dispatchEvent(newStorageEvent);
    },
  };
  return storage.setItem(key, newVal);
};
export default {
  data() {
    return {
      role: sessionStorage.getItem("role") || "未定義角色",
    };
  },
  mounted() {
    // 添加對 sessionStorage 的監(jiān)聽
    window.addEventListener("setItem", () => {
      this.role = sessionStorage.getItem("role");
    });
  },
  beforeDestroy() {
    // 移除對 sessionStorage 的監(jiān)聽
    window.removeEventListener("setItem", () => {});
  },
  methods: {
    change() {
      // 修改 sessionStorage 中的值
      this.setSessionItem("role", "管理員");
    },
  },
};
</script>