浏览器有哪些缓存机制？
--- 浏览器缓存主要指HTTP缓存，用来减少网络请求，加快页面加载，主要包括两类
（1）强制缓存（Cache-Control / Expires）
- 不与服务器通信，直接使用本地缓存。
- 常见响应头：
Cache-Control: max-age=3600Expires: Wed, 21 Oct 2025 07:28:00 GMT
- 在有效期内再次访问，浏览器直接读取缓存副本。
（2）协商缓存（ETag / Last-Modified）
- 浏览器向服务器验证资源是否更新。
- 若未修改，服务器返回
304 Not Modified，浏览器复用本地资源。 - 若资源已被修改，服务器返回
200 OK并携带最新资源，浏览器更新本地缓存。 - 常见响应头：
ETag与请求头If-None-MatchLast-Modified与请求头If-Modified-Since
此外还有几种具体的缓存层次：
“Memory Cache(内存缓存)” ：同一页面二次加载资源最快
“Disk Cache（磁盘缓存）” ：页面关闭后仍可复用资源
“Service Worker Cache” ：可编程控制，用于离线应用（PWA）
那浏览器有哪些存储机制？
包括Cookie、localStorage、SessionStorage、indexDB，Cache API，这些是供js独写的，除了Cookie之外都不随请求发到后端
| 类型 | 生命周期 | 大小限制 | 是否随请求发送 | 典型用途 |
|---|---|---|---|---|
| Cookie | 可自定义过期时间 | ~4KB | ✅ 自动随请求头 | 保存用户登录状态、个性化设置 |
| localStorage | 永久保存（除非手动清除） | ~5MB | ❌ | 保存长期数据，如主题偏好、上次登录时间 |
| sessionStorage | 页面关闭即清除 | ~5MB | ❌ | 保存一次会话内数据，如表单草稿、验证码倒计时 |
| IndexedDB | 持久化数据库 | 数百MB | ❌ | 存储结构化数据，如离线应用、缓存接口结果 |
| Cache API | 受开发者控制 | 较大 | ❌ | 缓存网络请求响应，用于 PWA 离线应用 |
拓展问（面试延申）：
1.推荐用Cookie存储敏感信息吗？为什么？
--不推荐，因为Cookie会随请求发到服务端，存在被劫持或CSRF（跨站请求伪造）风险
2.localStorage 与 IndexedDB 有什么区别？
--localStorage适合简单键值对，小数据，而IndexedDB适合结构化数据和大容量存储
注：面试官可能还会问 Cookie、localStorage 的容量限制和安全性。
总结：
存储与缓存：
“缓存（Cache） ”是面向资源加载（html，js，图片），属于“网络层面”的性能优化；
“存储（Storage） ”是面向应用数据（token，用户设置等）属于“应用层面”的数据保存；
一个是资源缓存，一个是数据存储。两者目的不同但是都能提升前端性能。
存储各种方式：
“Cookie”：用于服务端通信状态保持；
“localStorage”和“sessionStorage”：用于前端缓存用户数据
“indexDB”：用于大规模本地存储
推荐面试速记模板：
浏览器缓存机制主要指 HTTP 缓存，用来减少请求、加快加载速度，分为强制缓存和协商缓存；
而 Cookie、localStorage、sessionStorage、IndexedDB 等是浏览器的存储机制，用于保存前端数据。 缓存是资源层面的性能优化，存储是应用层的数据管理。
