localStorage缓存 接口 配置

devtools/2024/11/27 17:16:21/

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/devtools/137447.html

相关文章

为什么DDoS防御很贵?

分布式拒绝服务攻击(DDoS攻击)是一种常见的网络安全威胁,通过大量恶意流量使目标服务器无法提供正常服务。DDoS防御是一项复杂且昂贵的服务,本文将详细探讨为什么DDoS防御如此昂贵,并提供一些实用的代码示例和解决方案…

政安晨【零基础玩转各类开源AI项目】探索Cursor-AI Coder的应用实例

目录 Cusor的主要特点 Cusor实操 政安晨的个人主页:政安晨 欢迎 👍点赞✍评论⭐收藏 希望政安晨的博客能够对您有所裨益,如有不足之处,欢迎在评论区提出指正! Cursor 是 Visual Studio Code 的一个分支。这使我们能够…

第十六届蓝桥杯模拟赛第二期题解—Java

第十六届蓝桥杯模拟赛/校赛第二期个人题解,有错误的地方欢迎各位大佬指正 问题一(填空题) 【问题描述】 如果一个数 p 是个质数,同时又是整数 a 的约数,则 p 称为 a 的一个质因数。 请问, 2024 的最大的质因数是多少? …

高级java每日一道面试题-2024年11月25日-JVM篇-说说Java对象创建过程?

如果有遗漏,评论区告诉我进行补充 面试官: 说说Java对象创建过程? 我回答: 在Java高级面试中,Java对象的创建过程是一个常被提及的重要话题。以下是对Java对象创建过程的详细解析: 一、Java对象创建的基本步骤 检查类是否加载: 当需要创…

Linux 服务器安装 Docker - CentOS 9 (Stream)

🚀 作者主页: 有来技术 🔥 开源项目: youlai-mall 🍃 vue3-element-admin 🍃 youlai-boot 🍃 vue-uniapp-template 🌺 仓库主页: GitCode💫 Gitee &#x1f…

GitHub 和 GitLab

GitHub 和 GitLab 的概念 1. GitHub 定义:GitHub 是一个基于 Git 的版本控制和协作平台,专注于开源项目和开发者社区。主要功能: 托管代码仓库,支持 Git 协作。提供 Pull Request、代码审查和协作工具。拥有庞大的开源社区&…

[网鼎杯 2020 朱雀组]phpweb 详细题解(反序列化绕过命令执行)

知识点: call_user_func() 函数 反序列化魔术方法 find命令查找flag 代码审计 打开题目,弹出上面的提示,是一个警告warning,而且页面每隔几秒就会刷新一次,根据warning中的信息以及信息中的时间一直在变,可以猜测是date()函数一直在被调用 查看源代码发现一些信息,但是作用…

现代密码学

概论 计算机安全的最核心三个关键目标(指标)/为:保密性 Confidentiality、完整性 Integrity、可用性 Availability ,三者称为 CIA三元组 数据保密性:确保隐私或是秘密信息不向非授权者泄漏,也不被非授权者使…