浏览器缓存

1. Cookie

   存储位置：每次 HTTP 请求都会自动携带在请求头中（可通过 HttpOnly​、Secure 等属性控制）。

   容量：约 4KB。

   生命周期：可设置过期时间（Expires/Max-Age），或为会话级（关闭浏览器清除）。

   主要用途：身份认证（如 Session ID）、用户偏好设置。

   特点：自动随请求发送，可能影响性能。

2. Web Storage

   分为 localStorage​和 sessionStorage：

   localStorage

   存储位置：仅浏览器本地，不随请求自动发送。

   容量：通常 5-10MB（因浏览器而异）。

   生命周期：持久存储，除非手动清除或代码删除。

   作用域：同源（协议 + 域名 + 端口）共享。

   sessionStorage

   容量/存储位置：同 localStorage。

   生命周期：会话级，标签页关闭即清除。

   作用域：仅当前标签页内同源页面共享。

3. IndexedDB

   类型：浏览器内置的非关系型数据库。

   容量：通常较大（数百 MB 甚至更多）。

   存储形式：键值对，支持复杂数据类型、事务、索引。

   主要用途：存储大量结构化数据，如离线应用数据、文件缓存。

   特点：异步 API，功能强大但使用相对复杂。

4. Cache API (Service Worker 相关)

归属：Service Worker 的一部分。

主要用途：缓存网络请求和响应，实现离线访问、资源预缓存。

存储内容：Request/Response 对象。

特点：允许精细控制缓存策略（如“网络优先”、“缓存优先”）。

区别

特性	Cookie	localStorage	sessionStorage	IndexedDB	Cache API
容量	~4KB	5-10MB	5-10MB	数百 MB+	较大（通常为可用空间百分比）
生命周期	可设置过期时间	持久直到手动清除	标签页关闭	持久直到手动清除	持久直到手动清除或存储满
是否随请求自动发送	是	否	否	否	否
存储类型	字符串	字符串	字符串	结构化数据/文件	Request/Response
同源策略	支持跨子域配置	严格同源	严格同源 + 同标签页	严格同源	严格同源
主要用途	身份认证、会话	持久化用户数据	页面会话数据	大量结构化数据	网络请求/资源缓存

实际应用选择

用户身份/会话：使用 Cookie。

​简单键值持久化​：使用​localStorage（如用户主题偏好）。

​标签页内临时数据​：使用​sessionStorage（如表单草稿）。

​复杂/大量数据​：使用​IndexedDB（如邮件客户端、文档编辑器）。

​资源离线/加速​：使用​Cache API + Service Worker（如 PWA 应用）。

‍