localStorage 本身不支持自动过期，但可通过手动添加时间戳实现 TTL 缓存：写入时存 data 和 expiresAt，读取时校验并自动清理过期项，封装 set/get/remove 方法并加前缀管理，兼顾多标签页与异常容错。

HTML5 的 localStorage 本身不支持自动过期，但可以手动实现带 TTL（Time-To-Live）的 API 响应缓存。核心是：写入时打时间戳，读取时校验时效，过期即删——整个过程对业务层透明，且不依赖外部库。

写入响应时附带有效期

调用 API 成功后，把原始数据和过期时间一起序列化存储。例如缓存 10 分钟：

• 计算过期毫秒值：Date.now() + 10 * 60 * 1000
• 构造缓存对象：{ data: response, expiresAt: 1745968200000 }
• 使用唯一 key 存入，比如 api_user_profile_v2，避免和其他缓存冲突

读取前自动检查并清理

每次从 localStorage 获取数据时，必须先解析再比对时间：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 若 expiresAt 存在且小于 Date.now()，立即调用 removeItem(key) 清除
• 返回 null 或默认值，促使业务逻辑重新发起请求
• 建议封装成统一的 getCachedAPI(key) 函数，避免重复判断

控制缓存体积与多标签页一致性

高频缓存容易撑满 5–10MB 配额，还需兼顾浏览器多标签页场景：

立即学习“前端免费学习笔记（深入）”；

• 给所有 API 缓存 key 加统一前缀，如 cache_api_，方便批量识别和清理
• 时间戳更新只影响本页；其他标签页无法实时感知，所以不要依赖“精确同步”
• 如需强一致性，可配合 BroadcastChannel 发送清除通知，或改用 IndexedDB

推荐轻量封装结构

不必重造轮子，一个简明类就能覆盖常用操作：

• set(key, data, ttlMs)：自动计算 expiresAt 并存入
• get(key)：解析、校验、自动清理、返回有效数据或 null
• remove(key) 和 clear()：支持按前缀批量清空
• 异常兜底：JSON 解析失败或配额超限时静默处理，不中断主流程