快捷導(dǎo)航

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

更新時(shí)間：2024年07月27日 08:41:23 作者：朝陽(yáng)39

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

使用場(chǎng)景

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

重難點(diǎn)：

當(dāng) sessionStorage 中的 role 值改變時(shí)，需同步更新所有頁(yè)面的 role 值。

解決方案

使用公共組件封裝各個(gè)頁(yè)面對(duì) role 值的顯示，并在其中監(jiān)聽(tīng) sessionStorage 的變化，實(shí)時(shí)更新頁(yè)面的 role 值

核心代碼

將 sessionStorage 的變化注冊(cè)為全局事件 setItem

（若想全局使用，則下方代碼寫(xiě)在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);
};

在頁(yè)面創(chuàng)建時(shí)添加對(duì) setItem 事件的監(jiān)聽(tīng)

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

在頁(yè)面銷毀時(shí)移除對(duì) setItem 事件的監(jiān)聽(tīng)

  beforeDestroy() {
    // 移除對(duì) sessionStorage 的監(jiān)聽(tīng)
    window.removeEventListener("setItem", () => {});
  },

完整范例

首次進(jìn)入頁(yè)面的效果

點(diǎn)擊按鈕修改角色后

完整代碼如下：

<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() {
    // 添加對(duì) sessionStorage 的監(jiān)聽(tīng)
    window.addEventListener("setItem", () => {
      this.role = sessionStorage.getItem("role");
    });
  },
  beforeDestroy() {
    // 移除對(duì) sessionStorage 的監(jiān)聽(tīng)
    window.removeEventListener("setItem", () => {});
  },
  methods: {
    change() {
      // 修改 sessionStorage 中的值
      this.setSessionItem("role", "管理員");
    },
  },
};
</script>