面试官：Cookie、Session、Web Storage 的区别？答对这 3 点直接满分一、Cookie 和 Ses

Cookie：
- 定义：由服务器发送到浏览器并存储在客户端的小型文本数据（键值对）。
- 作用：用于维持客户端状态（如用户登录状态、个性化设置）。
- 存储位置：客户端（浏览器）。
- 传输方式：每次请求自动通过 HTTP 头（Cookie）发送到服务器。
Session：
- 定义：服务器端存储的用户会话信息（如用户ID、权限）。
- 作用：存储敏感或临时数据（如购物车内容、登录凭证）。
- 存储位置：服务器（如内存、数据库、Redis）。
- 传输方式：依赖 Cookie 中的 Session ID（如 session_id=abc123）关联用户与 Session 数据。

Q1：Cookie 和 Session 如何配合使用？

答案：
1. 用户登录时，服务器生成唯一 Session ID 并存入 Session 数据（如用户ID）。
2. 服务器通过 Set-Cookie 响应头将 Session ID 发送到浏览器（如 session_id=abc123）。
3. 浏览器后续请求自动携带该 Cookie，服务器通过 Session ID 查找对应的 Session 数据。

Q2：如何防止 Session ID 被窃取？

答案：
- 设置 Cookie 的 HttpOnly 属性（禁止 JavaScript 读取）。
- 设置 Cookie 的 Secure 属性（仅通过 HTTPS 传输）。
- 定期更换 Session ID（如用户重新登录时）。

Q3：禁用 Cookie 后 Session 还能用吗？

localStorage：
- 生命周期：永久存储（除非手动清除或代码删除）。
- 作用域：同一域名下的所有页面共享。
- 存储大小：约 5-10MB（不同浏览器差异）。
sessionStorage：
- 生命周期：仅在当前浏览器标签页有效（关闭标签页即销毁）。
- 作用域：仅当前标签页共享。
- 存储大小：同 localStorage。

维度	Cookie	localStorage	sessionStorage
存储容量	4KB	5-10MB	5-10MB
自动发送	每次请求自动携带	不自动发送	不自动发送
API易用性	需手动解析	简单（`setItem/getItem`）	同 localStorage
安全性	较低（易被 XSS 窃取）	同 Cookie	同 Cookie

Q1：localStorage 和 sessionStorage 的主要区别？

答案：
- 生命周期：localStorage 永久存储；sessionStorage 随标签页关闭销毁。
- 作用域：localStorage 跨标签页共享；sessionStorage 仅限当前标签页。

Q2：Web Storage 能被 XSS 攻击利用吗？如何防御？

Q3：如何选择 Cookie 和 Web Storage？

存储方式	存储位置	生命周期	作用域	自动发送	容量	典型应用场景
Cookie	客户端	可设置过期时间	域名+路径	是	4KB	用户登录状态、跟踪信息
Session	服务器	会话结束或过期	用户会话	否（依赖ID）	无限制	敏感数据（如购物车、权限）
localStorage	客户端	永久（手动清除）	同源域名	否	5-10MB	长期缓存（如用户主题设置）
sessionStorage	客户端	标签页关闭	当前标签页	否	5-10MB	临时数据（如表单草稿）

Q：Cookie 的 SameSite 属性有什么作用？

答案：
- SameSite=Strict：禁止跨站携带 Cookie（如银行网站）。
- SameSite=Lax：允许部分安全请求（如导航跳转）携带 Cookie（默认值）。
- SameSite=None：允许跨站携带，需配合 Secure 属性（HTTPS）。

Q：如何避免 Cookie 被 JavaScript 读取？

Q：localStorage 的数据如何同步到多个标签页？

答案：监听 storage 事件：

window.addEventListener('storage', (e) => {
  console.log('数据变化：', e.key, e.newValue);
});

Q：Web Storage 可以存储对象吗？如何处理？

Q：用户登录状态为什么推荐用 Cookie + Session，而不是 localStorage？

答案：
- 安全性：Cookie 的 HttpOnly 和 Secure 属性可防御 XSS 和中间人攻击。
- 兼容性：Cookie 支持跨域携带，而 Web Storage 仅限同源。

Q：如果禁用 Cookie，如何实现用户登录状态保持？