ts 做一个通用的缓存方法

创建一个文件tool

export interface IStorageStore {
  /** 过期时间 */
  expiredAt: number;
  /** 保存的内容 */
  value: any;
}

export interface IGetStorageInfo {
  /** 是不是过期 */
  expired: boolean;
  /** 缓存过期的时间戳 */
  expiredAt: number;
  /** 缓存过期的时间戳 - 当前时间戳 */
  expiredIn: number;
  /** 缓存的数据 */
  value: any;
}

export default const App = {
/** 写进缓存 */
 setStorage(usage: string, value: any, options: ISetStorageOptions = { expiresIn: -1 }): void {
    const key = storageKey(usage);
    const expiresIn = options.expiresIn || -1;
    let expiredAt;

    function getExpiresAt(): number {
      return expiresIn === -1 ? -1 : new Date().valueOf() + expiresIn * 1000;
    }

    // 默认为true: 表示过期时间会被覆盖
    if (options.expiresInOverwrite !== false) {
      expiredAt = getExpiresAt();
    } else {
      const stored = window.sessionStorage.getItem(key);

      if (typeof stored !== "undefined") {
        // 不覆盖，并且之前已经保存过，所以不对过期时间进行修改
        const reuslt = JSON.parse(stored) as IStorageStore;
        expiredAt = reuslt.expiredAt;
      } else {
        expiredAt = getExpiresAt();
      }
    }

    try {
      const data = {
        value,
        expiredAt,
      };
      window.sessionStorage.setItem(key, JSON.stringify(data));
    } catch (error) {
      console.log("缓存写入失败: ", error);
    }
  },
  /** 读取缓存信息 */
  getStorageInfo(usage: string): IGetStorageInfo | null {
    const key = storageKey(usage);
    /** 如果存在这个缓存就处理数据 否则就返回null */
    if (window.sessionStorage.getItem(key)) {
      const storedContent = JSON.parse(window.sessionStorage.getItem(key) || "");
      const now = new Date().valueOf();
      const expiredAt = Number(Reflect.get(storedContent, "expiredAt") || -1);
      const expiredIn = expiredAt - now;
      const expired = expiredAt !== -1 && expiredIn <= 0;
      let value = null;

      if (expired) {
        window.sessionStorage.removeItem(key);
      } else {
        value = Reflect.get(storedContent, "value");
      }

      return { expired, expiredAt, expiredIn, value };
    } else {
      return null;
    }
  },
  /** 移除缓存 */
  removeStorage(usage: string): any {
    window.sessionStorage.removeItem(usage);
  },
}

页面使用

<template>
  <div class="p-index">
    缓存类
    <input v-model="input" />
    <button @click="handleSaveCache">保存缓存</button>
    <button @click="handleGetCache">读取缓存</button>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import Tool from "@/tool/app";
@Options({})
export default class PageIndex extends Vue {
  input = "";

  handleSaveCache() {
    Tool.setStorage("input", this.input, { expiresIn: 10 });
  }

  handleGetCache() {
    const reuslt = Tool.getStorageInfo("input");
    console.log(reuslt);
  }
}
</script>