17370845950

JavaScript缓存需自主管理生命周期，内存缓存用Map+时间戳判断TTL，localStorage需手动添加expiresAt字段，推荐封装支持LRU、TTL和多存储策略的缓存类，并注意异常处理与服务端缓存头协同。

在 JavaScript 中实现缓存机制，核心是“按需存储 + 主动控制过期”，而不是依赖浏览器自动缓存（如 HTTP Cache），因为 JS 运行在内存或本地存储中，需要自己管理生命周期。

内存缓存（Map 或 Object）+ 时间戳判断

适合短期、高频、轻量数据（如 API 响应、计算结果）。用 Map 存储值和创建时间，读取时检查是否过期：

• 写入时记录 timestamp 和 ttl（毫秒）
• 读取前比对 Date.now() - timestamp > ttl，超时则删除并返回 null
• 示例：缓存用户信息 5 分钟

const cache = new Map();
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 + 自定义存储目标：

• 构造时指定最大容量、默认 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），但属于进阶场景