前端如何存储数据：Cookie、LocalStorage 与 SessionStorage 全面解析
一、前言
在 Web 前端开发中，我们经常需要在浏览器中存储数据。
例如：
- 保存用户的登录状态；
- 缓存接口请求数据；
- 记住用户偏好设置（如主题、语言）；
- 记录浏览历史等。
浏览器提供了三种主要的本地存储方式：
- Cookie
- LocalStorage
- SessionStorage
本文将系统介绍它们的区别、使用方式、优缺点与应用场景。
二、Cookie
1. Cookie 是什么？
Cookie 是由浏览器保存的一小段文本信息，用来记录用户与服务器之间的交互状态。
它最早被设计用于 HTTP 无状态特性补偿，例如登录状态、购物车信息等。
2. 设置 Cookie
（1）通过 JavaScript 设置
document.cookie = "username=Tom; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
（2）通过 HTTP 响应头设置
Set-Cookie: username=Tom; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/;
3. 获取与删除 Cookie
// 获取 Cookie
console.log(document.cookie);
// 删除 Cookie（通过设置过期时间）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
三、LocalStorage（本地存储）
1. LocalStorage 是什么？
LocalStorage 是 HTML5 引入的一种本地存储机制。
它可以永久存储数据（除非手动删除），并且数据不会随 HTTP 请求发送到服务器。
2. 使用方法
// 设置数据
localStorage.setItem('username', 'Tom');
// 获取数据
const name = localStorage.getItem('username');
console.log(name); // Tom
// 删除数据
localStorage.removeItem('username');
// 清空所有数据
localStorage.clear();
四、SessionStorage（会话存储）
1. SessionStorage 是什么？
SessionStorage 与 LocalStorage 类似，但它的生命周期仅限当前浏览器标签页会话。
一旦关闭页面或标签页，数据就会被清空。
2. 使用方法
// 设置数据
sessionStorage.setItem('token', 'abc123');
// 获取数据
const token = sessionStorage.getItem('token');
console.log(token);
// 删除数据
sessionStorage.removeItem('token');
// 清空全部
sessionStorage.clear();
总结
在前端开发中：
Cookie 更适合 与服务器交互的数据；
LocalStorage 适合 长期保存用户偏好或缓存；
SessionStorage 则更适合 一次性会话数据。
理解它们的原理与使用场景，可以让我们在项目中更高效、更安全地管理数据存储。
