HTML5 中 Cache API 怎么配合 TTL 过期机制自动清理陈旧数据-H5教程-PHP中文网

Cache API本身不支持TTL，需开发者在写入和读取时主动注入时效逻辑：写入时用IndexedDB或内存Map记录过期时间，读取前预判时效并跳过已过期缓存，避免脏读；Service Worker升级时通过切换缓存名并清理旧缓存实现批量失效。

html5 中 cache api 怎么配合 ttl 过期机制自动清理陈旧数据

Cache API 本身不支持 TTL（Time-To-Live）或自动过期，它只负责按请求 URL 存储和匹配 Response 对象。要实现“带过期时间的缓存”，必须由开发者在写入和读取环节主动注入时效逻辑——不能依赖 cache.match() 后再判断时间，而要把有效期检查前置到缓存写入与使用决策中。

在 Service Worker 中写入时附带过期元数据

Cache API 不存储自定义字段，但你可以把过期时间作为响应体的一部分，或用独立的 IndexedDB / localStorage 记录映射关系。更推荐的做法是：在 fetch 事件中拦截响应，生成一个封装了原始响应 + 过期时间的“增强型响应”对象，并用 cache.put(request, response) 存入缓存，同时将该 request 的 expiresAt 时间戳存入 IndexedDB 或内存 Map。

例如：对 /api/user 接口设置 10 分钟 TTL，在 fetch 事件中拿到响应后，先读取响应体 JSON，添加 __expires: Date.now() + 600_000 字段，再序列化回 body；或直接在 IndexedDB 中记录 url → { expiresAt: 1742436000000 }
注意：不要修改原始 Response 对象（它是只读的），而是构造新 Response，确保 headers 和 status 正确继承

读取时拒绝过期缓存，强制走网络

不能等 cache.match() 返回后再判断是否过期——那样已造成“脏读”。应在 match 前就做时效预判：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

用 request.url 查询 IndexedDB 中对应的 expiresAt，若 Date.now() > expiresAt，跳过 cache.match()，直接发起 fetch
若未查到记录（首次请求），或记录已过期，则 fetch 并在成功后更新缓存 + 写入新 expiresAt
避免频繁 DB 查询：可用内存 Map 缓存最近 100 条 url → expiresAt 映射，5 秒内重复请求复用内存值

配合 Service Worker 版本升级清理旧缓存

Cache API 的缓存名是字符串，没有生命周期管理能力。因此最可靠的“批量清理”方式，是在每次 Service Worker 更新时切换缓存名，并在 activate 阶段删除所有旧缓存：

例如当前缓存名为 'my-app-v2.3-cache'，新 SW 安装时打开 'my-app-v2.4-cache'
activate 回调中调用 caches.keys()，过滤出不含 'v2.4' 的缓存名，逐个执行 caches.delete(name)
这个动作不会影响正在使用的缓存（浏览器会保留被 active SW 引用的缓存），安全可靠

对静态资源用版本化预缓存 + TTL 辅助策略

对于 install 阶段预加载的静态资源（如 JS/CSS/图片），它们通常长期不变，但有时需强制刷新（比如热修复）。这时可：

在构建时为文件名加入哈希（app.a1b2c3.js），让 URL 变更即代表内容变更，天然规避过期问题
额外加一层逻辑：在 fetch 事件中，对匹配到的静态资源响应，也写入一条 IndexedDB 记录，标记其“最后验证时间”，并设置 24 小时 TTL；下次请求时若超时，先 fetch HEAD 请求比对 ETag，一致则更新本地验证时间，不一致才重新下载
这样既保持预缓存性能，又具备轻量级时效兜底