localStorage缓存 接口 配置

news/2024/12/1 5:47:56/

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.ppmy.cn/news/1551404.html

相关文章

设计模式:11、迭代器模式(游标)

目录 0、定义 1、迭代器模式的四种角色 2、迭代器模式的UML类图 3、示例代码 4、迭代器的next()方法与集合的get(int index)方法的效率对比(LinkedList为例) 0、定义 提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象…

非交换几何与黎曼ζ函数:数学中的一场革命性对话

非交换几何与黎曼ζ函数:数学中的一场革命性对话 非交换几何(Noncommutative Geometry, NCG)是数学的一个分支领域,它将经典的几何概念扩展到非交换代数的框架中。非交换代数是一种结合代数,其中乘积不是交换性的&…

RabbitMq死信队列(详解)

死信队列的概念 死信(dead message)简单理解就是因为种种原因,无法被消费的信息,就是死信。 有死信,自然就有死信队列。当消息在⼀个队列中变成死信之后,它能被重新被发送到另⼀个交换器中,这个交换器就是DLX( Dead L…

HarmonyOS Next 模拟器安装与探索

HarmonyOS 5 也发布了有一段时间了,不知道大家实际使用的时候有没有发现一些惊喜。当然随着HarmonyOS 5的更新也带来了很多新特性,尤其是 HarmonyOS Next 模拟器。今天,我们就来探索一下这个模拟器,看看它能给我们的开发过程带来什…

PaddleOCR:一款高性能的OCR工具介绍

一、引言 随着人工智能技术的不断发展,光学字符识别(OCR)技术在各行各业得到了广泛应用。OCR技术能够将图片、扫描件等非结构化数据中的文字信息提取出来,转换为可编辑的文本格式。在我国,百度开源了一款优秀的OCR工具…

力扣刷题TOP101:8.BM10 两个链表的第一个公共结点

目录: 目的 思路 复杂度 记忆秘诀 python代码 目的 两个无环的单向链表,它们的第一个公共结点{{6,7}。 思路 这个任务是找到两个链表的第一个公共结点。可以看作两个心机boy偷偷补课翻车事件。平时嘴上说自己在家玩游戏,实际上背地里都偷…

浅谈C#库之Memcached

一、Memcached库介绍 Memcached是一个开源的高性能分布式内存缓存系统,它通过将数据存储在内存中来加速动态Web应用。以下是Memcached的一些关键特点: 1、高性能:Memcached使用内存进行数据存储,访问速度极快。 2、分布式&…

[毕业设计]最全计算机专业毕业设计选题推荐汇总(源码+论文)

💗博主介绍:✌全网粉丝10W,CSDN全栈领域优质创作者,博客之星、掘金/华为云/阿里云等平台优质作者。大学毕业那年,曾经有幸协助指导老师做过毕业设计课题分类、论文初选(查看论文的格式)、代码刻录等打杂的事…