前端（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、OTHERecology: 运行环境 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 = {};  // 提供一个外部可访问的的静态方法  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();