浏览器存储空间分析器 - localStorage/Cache

localStorage：数据持久化存储，即使关闭浏览器或重启电脑后数据依然存在，没有过期时间，除非手动清除。同一域名下的所有页面共享数据。

sessionStorage：数据仅在当前会话期间有效，关闭标签页或浏览器窗口后数据即被清除。不同标签页之间的sessionStorage是隔离的，即使访问同一域名。

提示：二者存储上限通常为 5-10MB（因浏览器而异），且都只能存储字符串类型数据。

不同浏览器对localStorage的大小限制不同：

• Chrome：约 10MB 每个域名（origin）
• Firefox：约 10MB 每个域名
• Safari：约 5MB 每个域名（隐私模式下可能更小）
• Edge：约 10MB 每个域名

当存储空间不足时，浏览器会抛出 QuotaExceededError 异常。建议单个域名下localStorage使用量控制在5MB以内以确保兼容性。

Cache API 是 Service Worker 的一部分，允许开发者以编程方式缓存网络请求及其响应。它提供了精细的缓存控制能力，常用于PWA（渐进式Web应用）实现离线访问。

浏览器缓存（HTTP缓存） 是由浏览器自动管理的，基于HTTP头（如Cache-Control、ETag等）来决定是否缓存资源，开发者无法通过JavaScript直接操作。

Cache API需要HTTPS环境，存储配额通常比localStorage大得多，可达数百MB甚至更多，具体取决于磁盘空间。

清理浏览器存储的几种方式：

1. 通过本工具：在表格中逐项删除或一键清空localStorage/sessionStorage/Cache。
2. 浏览器开发者工具：F12 → Application → Storage → Clear site data。
3. 浏览器设置：设置 → 隐私与安全 → 清除浏览数据 → 选择"Cookie和站点数据"。
4. 代码方式：localStorage.clear() 或 sessionStorage.clear()。

注意：清空操作不可逆！建议在清空前使用导出功能备份重要数据。

localStorage适合存储较大的客户端数据；Cookie适合需要随请求发送的小数据（如认证令牌）。

现代浏览器使用Storage Quota Management API来管理站点存储空间：

• navigator.storage.estimate() 可查询当前站点的已用空间(usage)和配额(quota)。
• 配额包括localStorage、IndexedDB、Cache API、Service Worker等所有存储的总和。
• Chrome采用"最佳努力"策略——站点可使用空间通常远大于标称配额，但浏览器可能在磁盘空间紧张时自动清理。
• 持久化存储（Persistent Storage）可通过navigator.storage.persist()申请，获得更高的保留优先级。

配额因浏览器和磁盘空间而异，通常在数百MB到数GB之间。

localStorage数据丢失的常见原因：

• 手动清除：用户或程序清除了浏览器数据。
• 隐私模式：Safari隐私模式下localStorage可能不可靠，Chrome无痕模式下数据在窗口关闭后清除。
• 存储配额超限：写入失败且未捕获异常，导致后续数据丢失。
• 浏览器更新/重置：某些浏览器大版本更新可能清理存储。
• 跨域问题：不同协议（http/https）、不同端口、不同子域名之间的localStorage是隔离的。
• 磁盘清理工具：系统清理软件可能删除浏览器存储文件。

建议定期使用导出功能备份重要数据。

localStorage和sessionStorage都不适合存储敏感数据，因为它们以明文形式存储，容易受到XSS攻击。

更安全的选择：

• HttpOnly Cookie：JavaScript无法读取，防止XSS窃取（适合认证令牌）。
• Web Crypto API：在客户端加密数据后再存储到localStorage。
• IndexedDB + 加密：结合加密库存储较大数据。
• 服务端Session：敏感数据仅存服务端，客户端只保留Session ID。

安全建议：永远不要在localStorage中存储密码、信用卡号等敏感信息。