前端(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、ANDROIDOTHER
ecology: 运行环境 WECHATAPPMINIPROGRAMOTHER,
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();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/698670.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AD24-蛇形走线

一、单端蛇形走线 1、公差参数 2、布线-网络等长调节 3、参数说明 ①手工输入绕线的长度 ②参照个网络的长度绕线 ③按照自身设置的规绕线&#xff08;一般选用) 4、调节 5、最后 二、差分蛇形走线 1、布线-差分对网络等长调节 2、如在选中的时候出现问题&#xff0c;按CtrlD…

Linux学习方法-框架学习法——Linux应用程序编程框架

配套视频学习链接&#xff1a;https://www.bilibili.com/video/BV1HE411w7by?p4&vd_sourced488bc722b90657aaa06a1e8647eddfc 目录 Linux应用程序编程 Linux应用程序编程 Linux文件I/O(input/output) Linux文件I/O(五种I/O模型) Linux多进程 Linux多线程 网络通信(s…

集合、List、Set、Map、Collections、queue、deque

概述 相同类型的数据进行统一管理操作&#xff0c;使用数据结构、链表结构&#xff0c;二叉树 分类&#xff1a;Collection、Map、Iterator 集合框架 List接口 有序的Collection接口&#xff0c;可以对列表中的每一个元u尿素的插入位置进行精确的控制&#xff0c;用户可以根…

Qt事件过滤器

1. 事件过滤器 void QObject::installEventFilter(QObject *filterObj) bool eventFilter(QObject *obj, QEvent *event); filterObj表示事件筛选器对象&#xff0c;它接收发送到此QObject对象&#xff08;安装事件过滤器的部件对象&#xff09;的所有事件。筛选器可以停止事件…

SpringCloud-Gateway解决跨域问题

Spring Cloud Gateway是一个基于Spring Framework的微服务网关&#xff0c;用于构建可扩展的分布式系统。在处理跨域问题时&#xff0c;可以通过配置网关来实现跨域资源共享&#xff08;CORS&#xff09;。要解决跨域问题&#xff0c;首先需要在网关的配置文件中添加相关的跨域…

(六)激光线扫描-三维重建

本篇文章是《激光线扫描-三维重建》系列的最后一篇。 1. 基础理论 1.1 光平面 在之前光平面标定的文章中,已经提到过了,是指 激光发射器投射出一条线,形成的一个扇形区域平面就是光平面。 三维空间中平面的公式是: A X + B Y + C Z + D = 0 A X+B Y+C Z+D=0

矿产达人小程序修复前端

应用介绍 本文来自&#xff1a;矿产达人小程序修复前端 - 源码1688 矿产达人小程序&#xff1a; 矿产小游戏小程序是一款以矿产资源为主题的休闲娱乐游戏。以下是该小程序的主要功能特点&#xff1a; 游戏画面精美&#xff1a;小程序采用卡通化的设计风格&#xff0c;画面色…

程序媛的mac修炼手册-- 小白入门Java篇

最近因为要用CiteSpace做文献综述&#xff0c;间接接触Java了。所以&#xff0c;继Python、C之后&#xff0c;又要涉猎Java了。刺激&#xff01;&#xff01; 由于CiteSpace与Java要求版本高度匹配&#xff0c;有个匹配详情明天为大家讲解。总之&#xff0c;我的Java之旅开始于…

我们有在线社区啦!快来加入一起玩儿~

&#x1f64c;大噶好呀&#xff01;春节假期转瞬即逝&#xff0c;小陈已经正式开工啦&#xff5e;虽然不知道大家啥时候收假&#xff0c;但是 RTE 开发者社区㊗️诸位&#xff1a; &#x1f9e7;&#x1f432;&#x1f647;2024 开工大吉&#x1f647;&#x1f432;&#x1f9…

企业级SAS盘SSDPM1643a PM1653 Nytro 2050 KPM71VUG3T20固态硬盘

今天给大家介绍一下KIOXIA铠侠PM7系列均衡性硬盘KPM71VUG3T20 存储容量&#xff1a;3200 GB 接口类型&#xff1a;SAS-4 读取速度&#xff1a;4,200 MB/s 写入速度&#xff1a;3,650 MB/s 工作温度&#xff1a;0 ℃ to 75 ℃ 储存温度&#xff1a;40 ℃ to 85 ℃ MTTF&a…

投放效果难衡量?如何精准提升ROI

在当前的移动互联网环境下&#xff0c;App获客和转化成为了许多应用面临的一大难题。随着广告买量成本的不断攀升&#xff0c;用户增长遭遇了瓶颈。同时&#xff0c;由于移动环境广告标识难以完整获取&#xff0c;投放效果的衡量也变得更加困难。那么&#xff0c;如何打破这一困…

高录用快见刊【最快会后两个月左右见刊】第三届社会科学与人文艺术国际学术会议 (SSHA 2024)

第三届社会科学与人文艺术国际学术会议 (SSHA 2024) 2024 3rd International Conference on Social Sciences and Humanities and Arts *文章投稿均可免费参会 *高录用快见刊【最快会后两个月左右见刊】 重要信息 会议官网&#xff1a;icssha.com 大会时间&#xff1a;202…

Shell变量类型和运算符

一、Shell变量类型 1、变量类型 Shell的3种变量&#xff1a; &#xff08;1&#xff09;局部变量&#xff1a;除了本地变量外&#xff0c;还有shell脚本中定义的变量。 &#xff08;2&#xff09;全局变量&#xff1a;和局部变量相对。比如环境变量就是一种全局变量。 &am…

MaxScale实现mysql8读写分离

MaxScale 实验环境 中间件192.168.150.24MaxScale 22.08.4主服务器192.168.150.21mysql 8.0.30从服务器192.168.150.22mysql 8.0.30从服务器192.168.150.23mysql 8.0.30 读写分离基于主从同步 1.先实现数据库主从同步 基于gtid的主从同步配置 主库配置 # tail -3 /etc/my.…

刷新多个SOTA!最新Mamba魔改版本超越transformer,GPU内存消耗减少74%

因模型规模的扩展和需要处理的序列不断变长&#xff0c;transformer逐渐出现计算量激增、计算效率下降等问题。为克服这些缺陷&#xff0c;研究者们提出了Mamba。 Mamba是一种创新的线性时间序列建模方法&#xff0c;它结合了递归神经网络&#xff08;RNN&#xff09;和卷积神…

[面试] InnoDB中如何解决幻读?

幻读是通过 MVCC 机制来解决的, MVCC 类似于一种乐观锁的机制&#xff0c;通过版本的方式来区分不同的并发事务&#xff0c;避免幻读 问题! 什么是幻读? 事务A前后两次读取同一个范围的数据&#xff0c;在事务A两次读取的过程之间&#xff0c;事务B新增了数据&#xff0c;导致…

星际修仙之剑胆琴心

剧名&#xff1a;《星际修仙之剑胆琴心》 类型&#xff1a;科幻修仙爱情剧 故事大纲&#xff1a; 在遥远的未来&#xff0c;人类文明已经发展到星际时代&#xff0c;科技与修仙相结合&#xff0c;形成了一种全新的文明形态。在这个时代&#xff0c;修仙者不再局限于传统的修炼方…

图文说明Linux云服务器如何更改实例镜像

一、应用场景举例 在学习Linux的vim时&#xff0c;我们难免要对vim进行一些配置&#xff0c;这里我们提供一个vim插件的安装包&#xff1a; curl -sLf https://gitee.com/HGtz2222/VimForCpp/raw/master/install.sh -o./install.sh && bash ./install.sh 但是此安装包…

跳槽前应该做好哪些准备?

第一次求职也好&#xff0c;还是换工作也罢&#xff0c;都需要有严谨的考虑。对于已经工作上班的朋友来说&#xff0c;切不可轻易地辞掉工作&#xff0c;想要跳槽&#xff0c;一定要三思而后行&#xff0c;有一个周密的部署。跳槽有好处&#xff0c;也有弊端&#xff0c;频繁的…

【学网攻】 第(30)节 -- 综合实验三

系列文章目录 目录 系列文章目录 文章目录 前言 一、综合实验 二、实验 1.引入 实验目标 实验设备 实验拓扑图 实验配置 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学网攻】 第(3)节 -- 交换机配置聚合端口【学网攻】 第(4)节…