cookie、sessionStorage和localStorage的区别？

这三个家伙都是浏览器端的存储工具，但脾气和用途可大不一样。干了这么多年全栈，我见过不少混淆使用导致的坑，咱们今天就来理清楚。

打个比方，cookie就像你每次去银行办事都要带的身份证副本，信息量小，还得随身带着。sessionStorage像是银行柜台给你的一张临时填写的单据，离开窗口（关闭标签页）他们就收走了。而localStorage更像是你在银行租的一个保险箱，只要你不退租，东西就一直在那儿。

最核心的区别在生命周期和传输方式上。cookie通常由服务器通过Set-Cookie响应头设置，可以指定一个过期时间。此后每一次HTTP请求，浏览器都会自动把它附在请求头里发给服务器，所以它天生就和服务器端有联系。它的容量也最小，只有4KB左右。

// 在客户端也可以读写cookie，但通常不这么做
document.cookie = "username=John; path=/; max-age=3600";

sessionStorage和localStorage是纯正的“HTML5”本地存储API，数据只存在客户端。它们容量大得多，有5MB或更多，而且不会随着每次请求发送给服务器。sessionStorage的生命周期仅限于当前浏览器标签页，页面一关，数据就清空。localStorage则是持久化的，除非手动删除。

用法上，后两者用的是简洁的键值对API：

// sessionStorage 临时存
sessionStorage.setItem('tempInput', '未提交的内容');

// localStorage 持久存
localStorage.setItem('theme', 'dark');
let savedTheme = localStorage.getItem('theme');

所以该怎么选呢？如果你需要让服务器知道的状态，比如用户登录凭证，那就用cookie，并记得加上HttpOnly和Secure标志增强安全。如果只是想在前端存点用户偏好、缓存些不敏感的数据，localStorage是你的好帮手。sessionStorage则非常适合存那些一次性的、临时的工作内容，比如多步骤表单里每一步的填写结果。