在 Web 开发中，我们经常需要在用户浏览网页的过程中保存一些数据，比如用户的登录状态、偏好设置、购物车内容等。
由于 HTTP 协议本身是无状态的（即每次请求之间没有关联），因此需要借助一些机制来“记住”用户的状态。localStorage、Cookie 和 Session 就是三种常见的状态管理技术，但它们的设计目的、实现方式和适用场景各有不同。
Cookie
Cookie 由服务器通过 HTTP 响应头
Set-Cookie发送给浏览器，浏览器会将其保存下来，并在后续向同一域名发起请求时，自动通过Cookie请求头将这些数据回传给服务器。
这种机制使得服务器可以识别用户，比如通过一个名为 sessionid=abc123 的 Cookie 来标识某个用户的会话。
缺点
Cookie 的大小受限，通常每个 Cookie 不超过 4KB，一个域名下能存储的 Cookie 数量也有限制。正因为它的数据会在每次请求中自动发送，所以不适合存储大量数据，否则会增加网络开销。
优点：Cookie 支持设置一些安全属性
HttpOnly可以防止 JavaScript 访问，从而降低 XSS（跨站脚本攻击）的风险；Secure表示只能通过 HTTPS 传输；SameSite可以防止 CSRF（跨站请求伪造）攻击。
用途
因此，Cookie 虽然存储在客户端，但可以通过这些机制增强安全性，常用于保存会话标识（Session ID）或跟踪用户行为。
Session
严格来说，Session 并不是一种客户端存储技术，而是一种服务器端的会话管理机制。
当用户第一次访问服务器时，服务器会为该用户创建一个唯一的会话对象（Session），并将这个会话的数据（比如用户 ID、登录时间、权限信息等）保存在服务器内存或数据库中。同时，服务器会生成一个唯一的
Session ID（会话对象的ID），并通过 Cookie（通常是JSESSIONID或PHPSESSID）发送给浏览器。之后，浏览器每次请求都会携带这个
Session ID，服务器根据这个 ID 找到对应的会话数据，从而知道“你是谁”。
优点
由于真正的用户数据保存在服务器上，所以 Session 相对更安全，不容易被篡改。
缺点
占用服务器资源，尤其是在用户量大的情况下，需要借助 Redis 等分布式缓存来管理 Session。此外，如果服务器重启或 Session 超时（比如 30 分钟无操作），会话数据就会丢失。
用途
Session 通常用于存储敏感或临时的状态信息，比如用户登录凭证、购物车内容等。
localStorage
localStorage 本地存储 是 HTML5 引入的
Web Storage API的一部分，提供了一种在浏览器中持久化存储数据的方式。与 Cookie 不同，localStorage 中的数据不会自动随 HTTP 请求发送到服务器，除非你显式地通过 JavaScript 读取并加入请求。
优点
它的存储容量比 Cookie 大得多，通常可以达到 5MB 到 10MB，适合存储较多的非敏感数据，比如用户的主题偏好、表单草稿、离线缓存等。
缺点
localStorage 的生命周期是永久性的，除非用户手动清除浏览器缓存，或者开发者通过代码调用 localStorage.removeItem() 或 localStorage.clear()，否则数据会一直存在。
由于 localStorage 可以被 JavaScript 读写，一旦网站存在 XSS（跨站脚本攻击） 漏洞，攻击者就可以通过脚本窃取其中的数据。
用途
不建议在 localStorage 中存储敏感信息，比如 token 或用户身份信息。
存用户偏好，比如深色模式、语言设置，非敏感信息。
sessionStorage
和 localStorage 一样，是 HTML5 提供的浏览器本地存储技术，它们允许网页在用户的浏览器中保存数据，使用方式几乎相同（都通过 setItem、getItem、removeItem 等方法操作），但关键区别在于数据的生命周期和作用范围。
数据只在**当前“会话”**中有效。一旦关闭浏览器标签页（或整个浏览器，取决于浏览器实现），数据就会被清除。仅在同一个浏览器标签页中有效。即使你打开两个相同的页面（同源），它们的
sessionStorage也是隔离的，互不干扰。
用途
适合存储临时数据，比如表单填写内容、一次性状态，防止用户在单个会话中因刷新、后退、前进、意外跳转等操作导致数据丢失。
总结对比表
| 特性 | localStorage | Cookie | Session |
|---|---|---|---|
| 存储位置 | 客户端 | 客户端 | 服务器 |
| 生命周期 | 永久（手动清除） | 可设置过期时间 | 服务器控制（通常会话级） |
| 容量 | ~5-10MB | ~4KB/个 | 无严格限制（服务器资源） |
| 自动发送 | 否 | 是（同域请求） | 否（ID 通过 Cookie 发送） |
| JS 可访问 | 是 | 是（除非 HttpOnly） | 否 |
| 安全性 | 中（XSS 风险） | 高（可配置） | 高（数据在服务器） |
| 用途 | 本地缓存、偏好设置 | 身份标识、跟踪 | 敏感数据、会话管理 |
使用建议
- 不要在
localStorage、sessionStorage或Cookie中存储敏感信息（如密码、token），优先使用Session。 - 使用
Cookie时，对敏感 Cookie 设置HttpOnly和Secure。 localStorage适合存储大量非敏感的客户端数据，关闭浏览器后还想恢复数据。sessionStorage填表时刷新页面不想丢数据。Session适合存储服务器需要维护的用户状态。
如果你需要让服务器“记住”用户，比如用户登录后保持登录状态，通常的做法是服务器创建一个 Session，并通过一个 HttpOnly 的 Cookie 发送 Session ID，这样既安全又能自动传递。而如果你只是想在客户端保存一些用户偏好，比如深色模式、语言设置，那么 localStorage 是更合适的选择，因为它容量大、不会增加网络负担。Cookie 则介于两者之间，既可以用于传递 Session ID，也可以用于存储一些简单的、需要在请求中自动携带的状态信息。
