前端（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();