TS as a general cache method

Create a file tool

export interface IStorageStore {
    
  /**  Expiration time  */
  expiredAt: number;
  /**  Saved content  */
  value: any;
}

export interface IGetStorageInfo {
    
  /**  Is it overdue  */
  expired: boolean;
  /**  Timestamp of cache expiration  */
  expiredAt: number;
  /**  Timestamp of cache expiration  -  Current timestamp  */
  expiredIn: number;
  /**  Cached data  */
  value: any;
}

export default const App = {
    
/**  Write to cache  */
 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;
    }

    //  The default is true:  Indicates that the expiration time will be overwritten 
    if (options.expiresInOverwrite !== false) {
    
      expiredAt = getExpiresAt();
    } else {
    
      const stored = window.sessionStorage.getItem(key);

      if (typeof stored !== "undefined") {
    
        //  No coverage , And it has been saved before , Therefore, the expiration time will not be modified 
        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(" Cache write failed : ", error);
    }
  },
  /**  Read cache information  */
  getStorageInfo(usage: string): IGetStorageInfo | null {
    
    const key = storageKey(usage);
    /**  If this cache exists, process the data   Otherwise it returns 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;
    }
  },
  /**  Remove the cache  */
  removeStorage(usage: string): any {
    
    window.sessionStorage.removeItem(usage);
  },
}

Page using

<template>
  <div class="p-index">
     Cache class 
    <input v-model="input" />
    <button @click="handleSaveCache"> Save cache </button>
    <button @click="handleGetCache"> Read cache </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>