对比了前端三种本地存储方案：localStorage、sessionStorage 和 cookie。主要区别在于生命周期（永久/会话/可设置）、容量（5MB/5MB/4KB）及与服务端通信方式（不携带/自动携带）。localStorage 适合持久化数据，sessionStorage 适合临时会话，cookie 用于身份认证等需服务端识别的场景。开发中需注意数据类型转换及安全性配置。
在前端开发中，数据本地存储是提升用户体验、优化性能、实现持久化状态的核心技术。我们最常用的就是 localStorage、sessionStorage 和 cookie 这三种方案，但很多开发者容易混淆它们的用法、存储特性和适用场景。
| 特性 | localStorage | sessionStorage | cookie |
|---|---|---|---|
| 生命周期 | 永久有效，手动清除 | 仅当前会话（关闭标签 / 浏览器失效） | 可设置过期时间，默认会话级 |
| 存储容量 | 约 5MB | 约 5MB | 很小，仅 4KB |
| 与服务端通信 | 不参与 | 不参与 | 自动携带在 HTTP 请求头中 |
| 访问权限 | 同源（协议 + 域名 + 端口）共享 | 同源 + 同一标签页 共享 | 同源共享 |
| API 易用性 | 简单，键值对 API | 简单，键值对 API | 原生 API 繁琐，需手动封装 |
| 安全性 | 较高，不发往服务器 | 较高，不发往服务器 | 需配置 HttpOnly/Secure 防攻击 |
| 数据类型 | 仅支持 字符串 | 仅支持 字符串 | 仅支持 字符串 |
一句话总结：存大量数据用 localStorage，临时会话用 sessionStorage，需要给服务器传的状态用 cookie。
三者都是键值对存储，且只能存字符串，复杂对象需用 JSON 转换。
// 存
localStorage.setItem('username', '张三');
localStorage.setItem('userInfo', JSON.stringify({ age: 20 }));
// 取
const name = localStorage.getItem('username');
const user = JSON.parse(localStorage.getItem('userInfo'));
// 删单个
localStorage.removeItem('username');
// 清空全部
localStorage.clear();
API 和 localStorage 完全一致，唯一区别是生命周期：
sessionStorage.setItem('token', '临时令牌'); // 关闭页面立即消失
原生 API 比较繁琐，推荐封装或用库：
// 设置 cookie（带 7 天过期时间）
document.cookie = "username=张三; max-age=" + 60*60*24*7;
// 获取 cookie
const cookie = document.cookie;
// 删除 cookie（设置过期时间为过去）
document.cookie = "username=; max-age=0";
max-age/expires 定义过期时间。HttpOnly 时，JS 可读取，容易被 XSS 攻击；JSON.stringify 存，JSON.parse 取。掌握这三种存储方案，你就能在前端开发中灵活处理数据持久化，写出更稳定、更高效的代码。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online