在讨论数据存储时，我们总会立刻想到这三个概念：LocalStorage、SessionStorage 和 Cookies。然而问题在于，我们常常只是下意识地使用它们。
比如，我们习惯将令牌（Token）存放在 SessionStorage 中，但并非所有人都能说清 为什么 偏偏是它。其他概念的使用也常是类似的情形。我们所依赖的模块早已替我们做了这些决定，这固然方便，但也令人遗憾------因为即使你并非网站开发者，了解这些知识也很有必要。
本文旨在为你提供一份清晰、全面的指南，彻底解答"何时该用哪种存储方式"的疑惑。
让我们开始吧！
🗄️ LocalStorage
在深入了解 LocalStorage 之前，我们先简单解释一下什么是存储（Storage）。
简而言之，存储是浏览器专门用于存放信息的地方。在 JavaScript 中，这些存储被表示为对象，可以通过 window 对象的特定属性（保留名称）或专用变量来访问。
回到 LocalStorage。我们通过 localStorage 对象来访问它。最关键的特性是： 即使关闭浏览器标签页或整个浏览器，其中存储的数据依然存在。它适合存储较大量的数据。
js
// 保存值
localStorage.setItem("theme", "dark");
// 读取值
const theme = localStorage.getItem("theme");
console.log(theme); // "dark"
// 删除单个值
localStorage.removeItem("theme");
// 清空整个存储
localStorage.clear();适用场景： 需要长期保存的数据，例如用户设置、缓存数据等。
🕓 SessionStorage
SessionStorage 与 LocalStorage 类似，但存在关键区别：
- LocalStorage 仅按源（Origin） （协议+域名+端口）分区，所有同源标签页共享同一存储。
- SessionStorage 则按源和浏览器标签页（顶级浏览上下文） 双重分区。每个标签页拥有自己独立的 SessionStorage。
- 数据生命周期： SessionStorage 中的数据仅在页面会话期间 有效。一旦关闭该标签页，其对应的 SessionStorage 数据将被清除。它也适合存储较大量的数据。
js
// 保存值
sessionStorage.setItem("authToken", "123456");
// 读取值
const token = sessionStorage.getItem("authToken");
console.log(token); // "123456"
// 删除单个值
sessionStorage.removeItem("authToken");
// 清空整个存储
sessionStorage.clear();适用场景： 临时令牌、仅在单次网站访问（会话）期间需要的数据（例如表单填写过程中的临时状态）。
🍪 Cookies
Cookies 可能是普通用户最熟悉的存储方式了（那些经常出现的同意弹窗就是关于它的）。但很多人其实并不清楚："它们到底是干嘛用的？"
本质上，Cookie 是一种小型存储 （通常有大小限制，约 4KB），用于存储临时数据 （即数据会在设定的时间后过期删除）。它适合存储小量数据。
js
// 设置一个 Cookie (用户名=John，路径为根路径/，有效期1小时)
document.cookie = "username=John; path=/; max-age=3600";
// 读取所有 Cookie
console.log(document.cookie); // 可能输出 "username=John; otherCookie=value"
// 更新 Cookie (将用户名改为Mike)
document.cookie = "username=Mike; path=/; max-age=3600";
// 删除 Cookie (通过设置 max-age=0 使其立即过期)
document.cookie = "username=; path=/; max-age=0";主要特点与用途：
-
自动发送： 浏览器会在每次向同一服务器发起请求时，自动将匹配的 Cookies 附加在请求头中。
-
服务器可读写： 服务器端可通过 HTTP 响应头 (
Set-Cookie) 设置或修改客户端的 Cookies。 -
典型用途：
- 用户身份认证（Session ID）。
- 用户偏好设置（如语言）。
- 网站用户行为追踪（点击统计、鼠标移动分析等）。
- 跨请求的状态保持。
✅ 总结与选择指南
| 特性 | LocalStorage | SessionStorage | Cookies |
|---|---|---|---|
| 生命周期 | 永久存储（除非手动清除） | 标签页会话期间（关闭标签页即清除） | 可设置有效期（过期自动删除） |
| 作用域 | 同源的所有标签页共享 | 仅限当前标签页（同源不同标签页也不共享） | 同源的所有标签页共享 |
| 存储大小 | 通常较大（约 5-10MB 因浏览器而异） | 通常较大（约 5-10MB 因浏览器而异） | 很小（约 4KB，且每个域名下数量也有限制） |
| 访问方式 | 仅限客户端 JavaScript | 仅限客户端 JavaScript | 客户端 JavaScript 和 服务器端均可读写 |
| 数据自动发送 | 否 | 否 | 是（随请求自动发送到服务器） |
| 主要用途 | 长期本地数据（设置、缓存） | 单次会话的临时数据（标签页内状态） | 小量需服务器识别的数据（身份、跟踪） |
如何选择？
- 需要长期存储且数据量较大？ -> LocalStorage
- 数据只需在当前标签页会话期间存在且量较大？ -> SessionStorage
- 数据量小、需要服务器访问或在请求中自动发送（如身份认证）？ -> Cookies
理解 LocalStorage、SessionStorage 和 Cookies 的核心差异，根据数据的生命周期、大小限制、作用域要求以及是否需要服务器访问 来做出明智选择，将显著提升你的 Web 应用在性能、安全性和用户体验方面的表现。