Cache API、配额与安全：练习答案

Cache match/put 与响应体

const cache = await caches.open('docs-v1')
const request = new Request('/docs/index.html')
const response = await fetch(request)
await cache.put(request, response.clone())
const cached = await cache.match(request)
console.log(cached?.status, await cached?.text())

put 会消费响应体，所以网络响应要先 clone()；缓存命中后仍要检查版本和敏感信息。不要把带用户令牌的个性化响应放进公共缓存。

StorageManager 与配额

const estimate = await navigator.storage?.estimate()
console.log({ usage: estimate?.usage, quota: estimate?.quota })

配额是浏览器和设备相关的上限，不是业务可永久占用的容量。写入失败要捕获 QuotaExceededError，按“删除旧版本缓存—重试—提示用户”处理；不能仅依赖估算值，因为多个标签页会同时消耗空间。

跨标签页同步

storage 事件只在其他文档触发，当前标签页不会收到自己的写入。答案应在两个标签页分别修改同一键，记录旧值、新值和事件来源；需要结构化消息时使用 BroadcastChannel，并在页面卸载时 close()。

敏感数据与清理

退出登录时同时清理内存状态、IndexedDB、Cache API 和 localStorage 中的身份相关数据。清理操作要可重复，清理失败要记录并阻止进入“已退出”后的受保护页面；不要把密码、长期令牌或完整个人资料写入可被脚本读取的存储。