引言

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

功能需求

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

持久存储(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();