在前端开发中，持久化数据存储是一个非常常见的需求。为了实现这一点，浏览器提供了多种方式，包括 Cookie、localStorage 和 sessionStorage。这三者各有优劣，适用于不同的场景
1. Cookie
Cookie 是浏览器存储少量数据的一种机制，通常由服务器生成并发送到客户端。每次客户端向同一域名发起请求时，Cookie 都会自动附带在请求头中发送到服务器。
如图所示：
特点：
- 数据大小限制：单个 Cookie 的数据大小限制通常在 4KB 左右。
- 生命周期 ：Cookie 可以设置
expires或max-age属性来控制其有效期，默认情况下，Cookie 会在会话结束（即浏览器关闭）后删除。 - 作用域 ：Cookie 与特定的域名和路径关联，可以通过设置
domain和path来控制它的作用范围。 - 安全性 ：可以通过
Secure标记仅允许在 HTTPS 连接中传输 Cookie，还可以通过HttpOnly标记使 Cookie 无法被 JavaScript 访问，增加安全性。
应用场景：
- 会话管理：例如，登录状态的保持。
- 用户偏好：例如，保存用户的语言设置。
- 跟踪用户行为：例如，第三方分析工具使用 Cookie 进行用户跟踪。
示例：
// 设置一个 Cookie
document.cookie = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
// 读取 Cookie
const cookies = document.cookie.split("; ");
cookies.forEach(cookie => {
const [key, value] = cookie.split("=");
console.log(`${key}: ${value}`);
});
// 删除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";2. localStorage
localStorage 是 HTML5 引入的一种 Web 存储机制，用于持久化保存客户端数据。它的存储是基于键值对的，并且不同域名的 localStorage 是独立的。
特点：
- 数据大小限制：通常为 5MB。
- 生命周期：localStorage 中的数据没有过期时间，除非手动删除，否则数据会一直存在。
- 作用域：localStorage 只能在同一域名下的所有页面共享。
应用场景：
- 长期保存的数据：例如，用户的设置、主题选择等不需要频繁更改的数据。
- 离线 Web 应用：可以用于保存用户在离线时生成的数据。
示例：
// 设置数据
localStorage.setItem('theme', 'dark');
// 读取数据
const theme = localStorage.getItem('theme');
console.log(theme); // 输出 'dark'
// 删除数据
localStorage.removeItem('theme');
// 清空所有数据
localStorage.clear();3. sessionStorage
sessionStorage 也是 HTML5 引入的 Web 存储机制，与 localStorage 类似，但它的生命周期仅限于浏览器会话期间。关闭浏览器标签页或窗口后，sessionStorage 中的数据就会被清除。
特点：
- 数据大小限制：通常为 5MB。
- 生命周期：数据在页面会话期间有效，页面关闭后数据即被删除。
- 作用域：sessionStorage 只能在同一窗口或标签页中共享，不同的窗口或标签页之间的数据互不影响。
应用场景：
- 临时保存的数据：例如，表单数据的临时保存，以防止页面刷新导致的数据丢失。
- 页面间的数据传递：例如，在多步表单中，传递各步之间的数据。
示例：
// 设置数据
sessionStorage.setItem('sessionData', 'temporaryData');
// 读取数据
const data = sessionStorage.getItem('sessionData');
console.log(data); // 输出 'temporaryData'
// 删除数据
sessionStorage.removeItem('sessionData');
// 清空所有数据
sessionStorage.clear();4. 区别总结：
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 数据大小限制 | 约 4KB | 约 5MB | 约 5MB |
| 生命周期 | 可设置过期时间 | 持久保存，除非手动删除 | 仅在页面会话期间有效 |
| 作用域 | 与域名、路径相关联 | 同一域名下的所有页面共享 | 仅在同一窗口或标签页中共享 |
| 是否随请求发送 | 每次请求都会自动附带发送 | 否 | 否 |
| 常见应用场景 | 会话管理、用户偏好、跟踪用户 | 长期保存的数据、离线 Web 应用 | 临时保存的数据、页面间数据传递 |
PS：图片来源于B站技术蛋老师，侵删