JavaScript缓存需自主管理生命周期，内存缓存用Map+时间戳判断TTL，localStorage需手动添加expiresAt字段，推荐封装支持LRU、TTL和多存储策略的缓存类，并注意异常处理与服务端缓存头协同。
在 JavaScript 中实现缓存机制，核心是“按需存储 + 主动控制过期”，而不是依赖浏览器自动缓存（如 HTTP Cache），因为 JS 运行在内存或本地存储中，需要自己管理生命周期。
内存缓存（Map 或 Object）+ 时间戳判断
适合短期、高频、轻量数据（如 API 响应、计算结果）。用 Map 存储值和创建时间，读取时检查是否过期：
- 写入时记录
timestamp和ttl（毫秒） - 读取前比对
Date.now() - timestamp > ttl，超时则删除并返回 null - 示例：缓存用户信息 5 分钟
function setCache(key, value, ttl = 300000) {
cache.set(key, { value, timestamp: Date.now(), ttl });
}
function getCache(key) {
const item = cache.get(key);
if (!item) return undefined;
if (Date.now() - item.timestamp > item.ttl) {
cache.delete(key);
return undefined;
}
return item.value;
}
localStorage / sessionStorage + 过期字段
适合需跨页面/会话保留但有明确时效的数据（如登录态 token、配置项）。浏览器原生存储不支持自动过期，必须手动加字段：
- 存入时写入
expiresAt（时间戳），读取时校验 - 避免直接存原始值，统一包装为对象：
{ data: ..., expiresAt: 171xxxxxx } - 注意：localStorage 容量有限（通常 5–10MB），不适合大文件或大量缓存
封装一个带策略的缓存类（推荐）
把过期、清理、存储方式封装起来，提升复用性。支持 LRU 驱逐 + TTL + 自定义存储目标：
立即学习“Java免费学习笔记（深入）”；
- 构造时指定最大容量、默认 TTL、底层存储（memory / localStorage）
-
set(key, value, options?)支持单次覆盖 TTL -
get(key)自动清理过期项，并可选触发刷新逻辑（如重新请求） - 关键细节：读写都应做 try-catch，尤其 localStorage 可能因配额满或禁用而失败
配合服务端缓存头（补充说明）
JS 本身不控制 HTTP 缓存，但可通过 fetch 的 cache 选项协同后端策略：
-
cache: 'default'尊重响应头Cache-Control -
cache: 'no-cache'强制验证（发 HEAD 请求） - 后端设置
Cache-Control: public, max-age=3600，前端 fetch 即可自动缓存 1 小时 - 注意：Service Worker 可拦截请求，实现更精细的缓存控制（如 Cache API），但属于进阶场景
