localStorage缓存 接口 配置

localStorage缓存 接口 配置

  • 封装缓存函数
  • 接口缓存
  • 配置缓存

封装缓存组件 统一管理缓存设置 减少请求 优化逻辑

封装缓存函数

缓存的键和时间也可以放在一起,更好统一管理。

// 缓存键前缀
const PREFIX = 'diamond_'// 缓存时间配置(毫秒)
const CACHE_TIME = {SHORT: 5 * 60 * 1000,        // 5分钟MEDIUM: 30 * 60 * 1000,      // 30分钟LONG: 24 * 60 * 60 * 1000,   // 1天WEEK: 7 * 24 * 60 * 60 * 1000 // 1周
}// 缓存版本号,用于缓存更新
const CACHE_VERSION = '1.0.0'export const cache = {// 设置缓存 默认过期时间30分钟set(key, value, expire = CACHE_TIME.MEDIUM) {const data = {value,expire: expire ? Date.now() + expire : null,version: CACHE_VERSION}try {localStorage.setItem(PREFIX + key, JSON.stringify(data))return true} catch (e) {// 如果存储失败(存储已满),清理过期缓存后重试if (e.name === 'QuotaExceededError') {this.clearExpired()try {localStorage.setItem(PREFIX + key, JSON.stringify(data))return true} catch (e) {console.error('Cache storage failed:', e)return false}}return false}},// 获取缓存get(key) {const data = localStorage.getItem(PREFIX + key)if (!data) return nulltry {const { value, expire, version } = JSON.parse(data)// 检查版本号和过期时间if (version !== CACHE_VERSION || (expire && Date.now() > expire)) {this.remove(key)return null}return value} catch {this.remove(key)return null}},// 移除缓存remove(key) {localStorage.removeItem(PREFIX + key)},// 清除所有缓存clear() {Object.keys(localStorage).forEach(key => {if (key.startsWith(PREFIX)) {localStorage.removeItem(key)}})},// 清除过期缓存clearExpired() {Object.keys(localStorage).forEach(key => {if (key.startsWith(PREFIX)) {try {const data = JSON.parse(localStorage.getItem(key))if (data.version !== CACHE_VERSION || (data.expire && Date.now() > data.expire)) {localStorage.removeItem(key)}} catch {localStorage.removeItem(key)}}})},// 获取缓存大小(字节)size() {let size = 0Object.keys(localStorage).forEach(key => {if (key.startsWith(PREFIX)) {size += localStorage.getItem(key).length * 2 // UTF-16 编码每个字符占2字节}})return size},// 检查缓存是否可用isAvailable() {try {const testKey = PREFIX + 'test'localStorage.setItem(testKey, 'test')localStorage.removeItem(testKey)return true} catch {return false}},// 获取所有缓存键keys() {return Object.keys(localStorage).filter(key => key.startsWith(PREFIX)).map(key => key.slice(PREFIX.length))},// 批量设置缓存setMany(items, expire = CACHE_TIME.MEDIUM) {return items.every(({ key, value }) => this.set(key, value, expire))},// 批量获取缓存getMany(keys) {return keys.map(key => ({ key, value: this.get(key) }))},// 批量删除缓存removeMany(keys) {keys.forEach(key => this.remove(key))}
}// 缓存键定义
export const CACHE_KEYS = {USER_INFO: 'user_info',DIAMOND_LIST: 'diamond_list',DIAMOND_DETAIL: 'diamond_detail_',FILTER_OPTIONS: 'filter_options',LANGUAGE: 'language',MENU_STATE: 'menu_state',THEME: 'theme',USER_PREFERENCES: 'user_preferences'
}// 缓存时间定义
export const CACHE_EXPIRES = {USER_INFO: CACHE_TIME.WEEK,DIAMOND_LIST: CACHE_TIME.SHORT,DIAMOND_DETAIL: CACHE_TIME.MEDIUM,FILTER_OPTIONS: CACHE_TIME.LONG,LANGUAGE: CACHE_TIME.LONG,MENU_STATE: CACHE_TIME.LONG,THEME: CACHE_TIME.LONG,USER_PREFERENCES: CACHE_TIME.LONG
}// 定期清理过期缓存(每小时)
if (typeof window !== 'undefined') {setInterval(() => {cache.clearExpired()}, 60 * 60 * 1000)
}export default cache 

接口缓存

减少每次刷新或跳转进行数据请求,也可以进行二次封装减少代码量

import { cache, CACHE_KEYS, CACHE_EXPIRES } from '@/utils/cache'// 获取钻石列表
export function getDiamondPage(params) {// 生成缓存键const cacheKey = CACHE_KEYS.DIAMOND_LIST + JSON.stringify(params)// 尝试从缓存获取const cachedData = cache.get(cacheKey)if (cachedData) {return Promise.resolve(cachedData)}// 发起请求return request({url: '/admin-api/bs/diamond/page',method: 'post',data: params}).then(res => {if (res.code === 0) {// 设置缓存cache.set(cacheKey, res, CACHE_EXPIRES.DIAMOND_LIST)}return res})
}

配置缓存

// 获取配置信息
const getCurrentLanguage = () => {const cachedLang = cache.get(CACHE_KEYS.LANGUAGE)if (cachedLang) return cachedLangconst browserLang = navigator.language.toLowerCase()return browserLang.includes('zh') ? 'zh-CN' : 'en-US'
}
// 设置配置信息
cache.set(CACHE_KEYS.LANGUAGE, locale, CACHE_EXPIRES.LANGUAGE)

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

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

相关文章

机器学习模型——线性回归

文章目录 前言1.基础概念2.代价函数3.单变量线性回归3.1加载数据3.2初始化超参数3.3梯度下降算法3.3.1初次梯度下降3.3.2 多次梯度下降3.3.3结果可视化 前言 随着互联网数据不断累积,硬件不断升级迭代,在这个信息爆炸的时代,机器学习已被应用…

Flink CDC 使用实践以及遇到的问题

背景 最近公司在做一些业务上的架构调整,有一部分是数据从mysql采集到Starrocks,之前的一套方法是走 debezium 到 puslar 到 starrocks,这一套下来比较需要配置很多东西,而且出现问题以后,需要修改很多配置,而且现阶段…

Pgsql:json字段查询与更新

1.查询json字段的值 SELECT attribute_data->>设施类别 mycol, * FROM gis_coord_data WHERE attribute_data->>设施类别阀门井 查询结果如下: 2.更新json字段中的某个属性值 UPDATE gis_coord_data SET attribute_data(attribute_data::jsonb ||{&quo…

DAMODEL丹摩 | 关于我部署与使用FLUX.1+ComfyUI生成了一位三只手的jk美少女这回事

DAMODEL丹摩 | 关于我部署与使用FLUX.1ComfyUI生成了一位三只手的jk美少女这回事 最终效果图FLUX.1简介部署流程1. 创建资源2. 登录实例3. 部署ComfyUI4. 部署FLUX.1 使用流程1. 运行FLUX.1 导入工作流 声明:非广告,为用户使用体验分享 最终效果图 FLUX.…

d3-contour 生成等高线图

D3.js 是一个强大的 JavaScript 库,用于创建动态、交互式数据可视化。d3-contour 是 D3.js 的一个扩展模块,用于生成等高线图(contour plots)。 属性和方法 属性 x: 一个函数,用于从数据点中提取 x 坐标。y: 一个函…

微信小程序 城市点击后跳转 并首页显示被点击城市

在微信小程序中,渲染出城市列表后,如何点击城市,就跳转回到首页,并在首页显示所点击的城市呢? 目录 一、定义点击城市的事件 二、首页的处理 首页:点击成都市会跳转到城市列表 城市列表:点击…

Web 学习笔记 - 网络安全

前言 作为 前端开发者,了解一点 Web 安全方面的基本知识是有很必要的,未必就要深入理解。本文主要介绍常见的网络攻击类型,不作深入探讨。 正文 网络攻击的形式种类繁多,从简单的网站敏感文件扫描、弱口令暴力破解,…

JavaEE---计算机是如何工作的?

1.了解冯诺依曼体系结构 2.CPU的核心概念,CPU的两个重要指标(核心数和频率) 3.CPU执行指令的流程(指令表,一条一条指令,取指令,解析指令,执行指令) 4.操作系统核心概念(管理硬件,给软件提供稳定的运行环境) 5.进程的概念(运行起来的程序和可执行文件的区别) 6.进程的管理(…

【pyspark学习从入门到精通21】机器学习库_4

目录 评估模型的性能 保存模型 参数超参数调整 网格搜索 评估模型的性能 显然,我们现在想测试我们的模型表现得如何。PySpark 在包的 .evaluation 部分提供了一些分类和回归的评估方法: import pyspark.ml.evaluation as ev 我们将使用 BinaryClas…

788页页大型集团财务集中管控平台项目总体规划方案全文深入解读

“大型集团公司财务集中管控平台项目”的总体规划方案,内容全面且详细,主要涵盖以下几个方面: 1. 项目概述:介绍了项目的背景、目标、预期收益、设计思路与方法及原则。项目旨在全面提升财务集中管控能力,提高财务价值…

mac下安装Ollama + Open WebUI + Llama3.1

本文介绍mac下安装Ollama Open WebUI Llama3.1 8b具体步骤。 目录 推荐配置Ollama Open WebUI Llama3.1简介安装Ollama安装Open WebUI 推荐配置 m1以上芯片,16g内存,20g以上硬盘空间 Ollama Open WebUI Llama3.1简介 Ollama: 下载,管理…

C 语言函数递归探秘:从基础概念到复杂问题求解的进阶之路

我的个人主页 我的专栏:C语言,希望能帮助到大家!!!点赞❤ 收藏❤ 目录 什么是函数递归递归的基本组成递归的工作原理递归的优缺点递归的经典案例 5.1 阶乘计算5.2 斐波那契数列5.3 汉诺塔问题5.4 二分查找 递归的高级…

Rust语言俄罗斯方块(漂亮的界面案例+详细的代码解说+完美运行)

tetris-demo A Tetris example written in Rust using Piston in under 500 lines of code 项目地址: https://gitcode.com/gh_mirrors/te/tetris-demo 项目介绍 "Tetris Example in Rust, v2" 是一个用Rust语言编写的俄罗斯方块游戏示例。这个项目不仅是一个简单…

Web开发:使用stackexchange.redis库对redis进行增删改查

一、安装第三方库 二、官网 StackExchange.Redis |通用型 redis 客户端 三、连接示例 private static string redisConnectionString "localhost:6379,passwordyourpassword,defaultDatabase0,syncTimeout10000";private static string redisConnectionString &q…

3分钟快速掌握—— 进制转换,二进制计算【零基础】

1、计算机中的进制 1.1进制的三要素 进制 数码 基数 位权 十进制 0 1 2 3 4 5 6 7 8 9 10 .......10^2 10^1 10^0 10^-1 10^-2 10^-3..... 二进制 0 1 2 .......2^2 2^1 2^0 2^-1 2^-2 2^-3..... 八进制 0 1 2 3 4 5 6 7 8 .......8^2 8^1 8^0 8^-1 8^-2 8^-3.…

HDMI转VGA方案 LT8612UX(HDMI2.0) LT8612SX LT8511EX LT8522EX LT8612EX_e(HDMI1.4)

一、产品概述 LT8612UX是一款高性能的HDMI至HDMI&VGA转换器,由龙迅半导体公司推出。它能够将HDMI2.0数据流转换为HDMI2.0信号和模拟RGB信号,同时输出8通道I2S和SPDIF信号,实现高质量的7.1声道音频。该转换器采用最新的ClearEdge技术&…

华三(HCL)和华为(eNSP)模拟器共存安装手册

接上章叙述,解决同一台PC上同时部署华三(HCL)和华为(eNSP)模拟器。原因就是华三HCL 的老版本如v2及以下使用VirtualBox v5版本,可以直接和eNSP兼容Oracle VirtualBox,而其他版本均使用Oracle VirtualBox v6以上的版本,…

滚动的轮胎css3动画案例

目录 一、介绍 二、思路分析 三、轮胎制作 1.HTML代码 2.css 3.运行结果 四、轮胎动画 五、路的制作 1.HTML 2.css 六、运行结果 七、结束语 一、介绍 本节内容我们来制作一个轮胎滚动的案例,可以当作一个loading,其中我们的轮胎是纯css完成的,…

PointNet++论文复现

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

基础入门-Web应用架构类别源码类别镜像容器建站模版编译封装前后端分离

知识点: 1、基础入门-Web应用-搭建架构上的技术要点 2、基础入门-Web应用-源码类别上的技术要点 一、演示案例-架构类别-模版&分离&集成&容器&镜像 1、套用模版型 csdn / cnblog / github / 建站系统等 安全测试思路上的不同: 一般…