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 + 自定义存储目标：
立即学习“Java免费学习笔记（深入）”；
构造时指定最大容量、默认 TTL、底层存储（memory / localStorage）set(key, value, options?) 支持单次覆盖 TTLget(key) 自动清理过期项，并可选触发刷新逻辑（如重新请求）关键细节：读写都应做 try-catch，尤其 localStorage 可能因配额满或禁用而失败
配合服务端缓存头（补充说明）
JS 本身不控制 HTTP 缓存，但可通过 fetch 的 cache 选项协同后端策略：
cache: 'default' 尊重响应头 Cache-Controlcache: 'no-cache' 强制验证（发 HEAD 请求）后端设置 Cache-Control: public, max-age=3600，前端 fetch 即可自动缓存 1 小时注意：Service Worker 可拦截请求，实现更精细的缓存控制（如 Cache API），但属于进阶场景
以上就是如何在javascript中实现缓存机制_怎样设置缓存策略和过期时间？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544203.html
微信扫一扫 
支付宝扫一扫 
