HTML5客户端存储通过分级生命周期与按需配额预估实现可控管理：按数据特性分层归类，各层设存活逻辑与溢出策略；异常时逐层降级（如localStorage→sessionStorage、拆分indexedDB写入、Cache API失败转伪缓存）；清理需原子化同步清除所有存储层。
HTML5 客户端存储没有统一配额 API，但可通过“分级生命周期 + 按需配额预估”实现缓存文件的可控管理。核心思路是：把不同重要性、时效性、体积的数据，分配到不同存储层，并为每层设定明确的存活逻辑和溢出应对策略。
按数据特性分层选择存储介质
不靠经验猜测，而依据浏览器实际配额边界与数据行为做硬性归类：
- 瞬时状态（：用内存 Map 或普通变量，比如表单输入中的未提交草稿、滚动位置、临时选中项——不进任何持久化存储，页面卸载即丢
-
会话级缓存（单标签生命周期）：优先用
sessionStorage，容量约 5–10 MB，关闭标签页自动释放。适合多步流程中间态、临时 token、未确认的筛选条件 -
轻量元数据（小时~天级）：用
localStorage存 ID、时间戳、展开状态等指针型数据（如'last-loaded-category-mobile': '2026-10-08T15:22Z'），单条控制在 2 KB 内，总量预估不超过 6 MB，留出余量防 Safari 隐私模式突变 -
实体数据（天~周级，含图片/富文本）：必须走
IndexedDB，配额高（桌面 Chrome 可达 250 MB+），支持事务与批量清理。WebStorage 只存其主键或版本号，形成“指针+实体”解耦结构 -
离线资源（静态资产）：交由
Cache API + Service Worker管理，按资源类型命名缓存（如'static-v2'、'api-fallback'），避免混存；总用量受同源配额约束，需与 IndexedDB 协同监控
给每层加时间维度与空间守门员
生命周期不能只靠“过期时间”，得结合写入前预检 + 读取时校验 + 溢出后清理三重机制：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 对
localStorage中的时间戳类 key，读取时用new Date().getTime() - new Date(stamp).getTime()判断是否超 TTL（如分类数据缓存 12 小时），超时则自动删除并标记需刷新 - 对
IndexedDB，建表时加createdAt和accessedAt字段；每次读取后更新accessedAt；后台定时任务（如页面空闲时）扫描并删除accessedAt超 7 天的记录 - 所有写入操作前做软容量预估：维护一个本地计数器，例如
dbSizeEstimate += itemSize，当估算值 > 80% 已知阈值（如 localStorage 设为 8 MB）时，触发 LRU 清理最旧的 3 条元数据 - 对 Cache API，install 阶段用
caches.keys()获取已有缓存列表，按命名规则识别旧版本（如static-v1），在 activate 阶段调用caches.delete()主动淘汰
配额逼近时的降级链必须具体可执行
检测不是为了报错，而是为了切换路径。异常捕获要落到每一层写入点：
-
localStorage.setItem()抛QuotaExceededError→ 降级存入sessionStorage，同时设置window.__cache_fallback = 'session'标记，后续同域请求优先走该层 -
indexedDB.open()失败或transaction.commit()报AbortError→ 拆分当前写入批次为每 20 条一组，逐批提交；若仍失败，将剩余数据暂存在内存 Map，待下次网络恢复后重试 -
caches.open()或cache.put()失败 → 不再尝试新缓存，直接返回 fetch 原始响应，并在 response headers 中检查Cache-Control: max-age，将其转换为 localStorage 中的 TTL 时间戳，实现“伪缓存”兜底 - 所有降级动作发生后，向用户轻提示：“缓存空间紧张，部分数据将临时保存在本页内”，不中断主流程
跨存储协同清理不能只清 localStorage
用户点击“清除缓存”时，必须原子化清理全部相关层，否则残留数据会持续占用空间并引发不一致：
- 先调用
indexedDB.deleteDatabase('my-app-db')，监听onsuccess后再继续 - 再执行
localStorage.clear()和sessionStorage.clear() - 最后用
caches.keys().then(keys => Promise.all(keys.map(key => caches.delete(key)))))清空所有 Cache API 缓存 - 额外建议：在 indexedDB 的 upgrade 过程中，自动迁移旧版 objectStore 数据，并删除已废弃的 store，避免历史版本堆积
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
