前端（vue）数据存储方案

引言

本需求文档旨在明确前端项目中的数据存储需求，包括数据类型、数据结构、数据交互方式等。它定义了前端项目中需要存储和处理的数据，以及对这些数据进行访问和操作的要求。

功能需求

数据存储按数据类型分为 持久存储、内存存储（响应式）、内存存储（非响应式），根据不同的业务场景选择合适的存储方式。

持久存储(localStorage)

数据存储在本地磁盘，关闭网页或异常退出程序时数据不会被清除，可长期存在于磁盘中。可用于保存: 登录信息，程序设置信息等

export class LocalStorageConstant {
  /**
   * 用户 token
   */
  static USER_TOKEN = "USER:TOKEN";

  /**
   * 用户信息
   */
  static USER_INFO = "USER:INFO";

  /**
   * 微信信息
   */
  static WX_USER_INFO = "WX:USER:INFO";
}

export class LocalStorageUtil {
  // 静态属性 引用 LocalStotrage 类的唯一实例对象
  static localStorageUtil: LocalStorageUtil;
  // 区分不同的环境，避免 iOS 小程序与小程序，小程序与公众号间本地存储混乱
  public ecologyName: string | null;

  // 私有化构造器
  private constructor() {
    this.ecologyName = store.getters.ecologyName;
  }

  // 提供一个外部可访问的的静态方法
  public static getInstance() {
    if (!this.localStorageUtil) {
      this.localStorageUtil = new LocalStorageUtil();
    }
    return this.localStorageUtil;
  }
  
  /**
   * 获取 Key
   * @param key
   * @returns
   */
  private getKey(key: string) {
      key =this.ecologyName ?? ""  + ":" +  key;
      return key.toUpperCase()
  }

  /**
   * 保存本地
   * @param key
   * @param value
   * @param expire 过期时间
   * @returns
   */
  public setWithExpire(key: string, value: string, expire: number) {
    if (!key) {
      return;
    }
    key = this.getKey(key);
    let now = new Date().getTime();
    let expireTime = now + expire * 1000;
    let info = { value: value, expireTime: expireTime };
    localStorage.setItem(key, JSON.stringify(info));
  }

  /**
   * 保存本地
   * @param key
   * @param value
   * @returns
   */
  public set(key: string, value: string | null) {
    if (!key || !value) {
      return;
    }
    key = this.getKey(key);
    let info = { value: value };
    localStorage.setItem(key, JSON.stringify(info));
  }

  /**
   * 获取本数据
   * @param key
   * @returns
   */
  public get(key: string) {
    if (!key) {
      return null;
    }
    
    key = this.getKey(key);

    let value = localStorage.getItem(key);
    if (!value) {
      return null;
    }
    let info = JSON.parse(value);
    if (info.expireTime != null && new Date().getTime() > info.expireTime) {
      localStorage.removeItem(key);
      return null;
    }
    return info.value;
  }

  /**
   * 保存 token
   * @param token
   */
  public setToken(token: string) {
    this.set(StorageConstant.USER_TOKEN, token);
  }

  /**
   * 获取 token
   */
  public getToken() {
    return this.get(StorageConstant.USER_TOKEN);
  }

  /**
   * 保存微信信息
   * @param token
   */
  public setWxInfo(wxInfo: WechatUserInfo) {
    this.set(StorageConstant.WX_USER_INFO, JSON.stringify(wxInfo));
  }

  /**
   * 获取微信信息
   */
  public getWxInfo() {
    return this.get(StorageConstant.WX_USER_INFO);
  }
}

export default LocalStorageUtil.getInstance();

内存存储(响应式)store

数据存储与内存中不会进行持久化存储，关闭网页或异常退出程序时数据会被清除。可用与保存临时信息例如：邀请人信息，渠道信息

• 响应式：数据改变时会引起页面刷新
  统一使用 store.getters.** 方式取值

token: 登录信息
userInfo: 用户信息
wxUserInfo: 微信授权信息
isShowLoginView: 是否显示登录      
isShowLoadingView: 是否显示加载
invitationCode: 邀请人标识码
terminalType: 终端类型 iOS、ANDROID、OTHER
ecology: 运行环境 WECHAT、APP、MINIPROGRAM、OTHER,
channel: 渠道
ecologyName: 生态名
loginSilentTicket: 静默登录票据
browseUUID: 本次访问项目唯一标识
version: 当前版本号

内存存储(非响应式)

仅做数据存储使用，数据改变不是自动引起页面刷新

export class MemoryStorageConstant {
  /**
   * 用户 token
   */
  static USER_TOKEN = "USER:TOKEN";
}

export class MemoryStorageUtil {
  // 静态属性 引用 LocalStotrage 类的唯一实例对象
  static memoryStorageUtil: MemoryStorageUtil;

  // 所有属性通过 Map 存储
  private map: Record<string, any> = {};

  // 提供一个外部可访问的的静态方法
  public static getInstance() {
    if (!this.memoryStorageUtil) {
      this.memoryStorageUtil = new MemoryStorageUtil();
    }
    return this.memoryStorageUtil;
  }

  /**
   * 保存数据
   * @param key
   * @param value
   * @param expire 过期时间
   * @returns
   */
  public setWithExpire(key: string, value: string, expire: number) {
    if (!key) {
      return;
    }

    let now = new Date().getTime();
    let expireTime = now + expire * 1000;
    let info = { value: value, expireTime: expireTime };
    this.map[key] = JSON.stringify(info);
  }

  /**
   * 保存本地
   * @param key
   * @param value
   * @returns
   */
  public set(key: string, value: string | null) {
    if (!key || !value) {
      return;
    }
    let info = { value: value };
    this.map[key] = JSON.stringify(info);
  }

  /**
   * 获取数据
   * @param key
   * @returns
   */
  public get(key: string) {
    if (!key) {
      return null;
    }

    let value = this.map[key];
    if (!value) {
      return null;
    }
    let info = JSON.parse(value);
    if (info.expireTime != null && new Date().getTime() > info.expireTime) {
      this.map[key] = null;
      return null;
    }
    return info.value;
  }

  /**
   * 获取数据并删除
   * @param key
   * @returns
   */
  public getAndDelete(key: string) {
    if (!key) {
      return null;
    }

    let value = this.map[key];
    this.map[key] = null;
    if (!value) {
      return null;
    }
    let info = JSON.parse(value);
    if (info.expireTime != null && new Date().getTime() > info.expireTime) {
      return null;
    }
    return info.value;
  }
}

export default MemoryStorageUtil.getInstance();