讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > js教程 > 正文

如何在javascript中实现缓存机制_怎样设置缓存策略和过期时间？

狼影
发布： 2025-12-19 22:36:10
原创
572人浏览过
JavaScript缓存需自主管理生命周期，内存缓存用Map+时间戳判断TTL，localStorage需手动添加expiresAt字段，推荐封装支持LRU、TTL和多存储策略的缓存类，并注意异常处理与服务端缓存头协同。

如何在javascript中实现缓存机制_怎样设置缓存策略和过期时间？

在 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 + 自定义存储目标：

AI发型设计
AI发型设计

虚拟发型试穿工具和发型模拟器

AI发型设计 247
查看详情 AI发型设计

立即学习“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），但属于进阶场景

以上就是如何在javascript中实现缓存机制_怎样设置缓存策略和过期时间？的详细内容，更多请关注php中文网其它相关文章！

相关标签：
javascript java js 前端 浏览器 session 后端 sessionstorage JavaScript Object NULL if 封装 date timestamp try catch Token const public map delete JS undefined function 对象 default http

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：Javascript的包管理是什么_如何使用npm或yarn？ 下一篇：Javascript的模板字符串是什么_它比普通字符串好在哪？
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
什么是模板字符串_Javascript中如何使用 模板字符串是JavaScript中用反引号包裹、支持多行文本和${}嵌入表达式的字符串写法，比单/双引号更灵活；支持直接换行、变量插值、运算及函数调用；还可通过标签函数实现高级定制处理。
2025-12-19 22:11:58
288
javascript中的国际化API是什么_如何实现多语言支持 JavaScript国际化依赖Intl对象进行数字、日期、货币等格式化，不处理文本翻译；需结合ICU消息格式资源包、语言检测与动态切换逻辑实现完整本地化。
2025-12-19 22:11:28
478
javascript模块打包是什么_为什么需要Webpack这样的工具？ JavaScript模块打包是将多个JS及非JS资源按依赖合并转换优化为少量浏览器可运行文件的过程；它解决ES6模块的局限性，支持Loader/Plugin扩展、代码分割、TreeShaking等工程化能力。
2025-12-19 22:09:56
474
javascript的Canvas是什么_如何绘制图形和动画？ Canvas是HTML绘图元素，需三步使用：获取画布、获取2D上下文、调用绘图方法；图形绘制分直接矩形与路径类，动画靠requestAnimationFrame循环清空重绘；注意尺寸设置、坐标原点、beginPath()调用及上下文状态管理。
2025-12-19 22:08:48
476
javascript模块打包是什么_Webpack和Vite有何不同？ Vite开发时免打包、按需编译，启动瞬时且HMR精准；Webpack全量构建、兼容性广但冷启动慢；新项目优先Vite，老项目或需深度定制选Webpack。
2025-12-19 22:08:02
352
JavaScript中的“this”关键字如何理解？ JavaScript中this的指向由调用时决定，而非定义时；普通调用指向全局或undefined，对象方法调用指向该对象，构造调用指向新实例，箭头函数继承外层this。
2025-12-19 22:08:02
661
为什么javascript需要严格模式_它能解决哪些潜在问题 严格模式是JavaScript的限制性执行环境，通过"usestrict"启用，能提前暴露隐性错误、防止意外创建全局变量、禁止静默失败操作、限制易错语法，并为ES6+特性提供兼容性基础。
2025-12-19 22:07:02
798
Javascript如何实现排序_如何自定义比较函数？ Array.prototype.sort()默认按字符串Unicode码点排序，数字数组需用(a,b)=>a-b升序或b-a降序；对象数组可按属性用减法或localeCompare排序，多级排序用逻辑或实现优先级。
2025-12-19 22:06:49
848
什么是javascript纯函数_它如何带来可预测性？ 纯函数是只依赖输入参数且无副作用的JavaScript函数，给定相同输入必返回相同输出，不修改外部状态；其核心特征为无副作用和输出仅由输入决定，适用于数据转换等需稳定性的场景。
2025-12-19 22:06:08
511
JavaScript中==和===的区别_类型转换规则 ===严格比较值和类型不转换，==会隐式转换类型后比较；如5==="5"为false，而"1"==true为true；推荐统一使用===，仅null==undefined等极少数场景例外。
2025-12-19 22:05:02
330
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部