前端数据持久化主要有Cookie、localStorage、sessionStorage和IndexedDB四种方案：Cookie小容量且随请求发送，适合存token；localStorage大容量持久存储字符串；sessionStorage仅限当前会话；IndexedDB支持复杂结构化数据的异步操作。
前端数据持久化离不开本地存储技术。在JavaScript中，有多种方式可以实现数据的本地保存，让信息在页面刷新或关闭后依然可用。这些方案各有特点，适用于不同场景。
Cookie：传统的小容量存储
Cookie是最原始的本地存储方案之一，最初用于会话管理。它能在浏览器和服务器之间传递数据，但也有明显限制。
- 存储空间小，通常不超过4KB
- 每次HTTP请求都会携带Cookie内容，增加网络开销
- 可设置过期时间、作用域（domain/path）和安全标志（HttpOnly、Secure）
- 容易受到XSS和CSRF攻击，需谨慎处理敏感信息
适合存储用户身份标识（如token）、偏好设置等小型且需要服务端访问的数据。
localStorage：简单易用的持久化存储
作为Web Storage的一部分，localStorage提供更便捷的大容量存储能力。
立即学习“Java免费学习笔记（深入）”；
- 容量通常为5~10MB，远大于Cookie
- 数据不会随请求发送，仅在客户端使用
- 除非手动清除，否则数据永久保存
- 只能存储字符串，对象需通过JSON.stringify转换
- 同源策略限制，无法跨域共享
常用于保存用户配置、表单草稿、离线数据缓存等场景。调用方式简单：
// 存储数据
localStorage.setItem('theme', 'dark');
// 读取数据
const theme = localStorage.getItem('theme');
// 删除数据
localStorage.removeItem('theme');
sessionStorage：会话级临时存储
与localStorage接口一致，但生命周期仅限当前会话。
- 页面关闭后数据自动清除
- 每个标签页独立存储，互不影响
- 同样受限于同源策略
适合临时保存敏感操作数据，比如多步骤表单的中间状态，避免长期残留。
IndexedDB：功能强大的本地数据库
当需要存储大量结构化数据时，IndexedDB是更合适的选择。
- 支持事务型操作，保障数据一致性
- 可存储对象、数组、二进制（Blob）等复杂类型
- 容量较大，现代浏览器可达几百MB甚至更多
- 异步API，避免阻塞主线程
- 学习成本较高，原生API较繁琐
适用于离线应用、消息队列、文件缓存等复杂需求。也可结合封装库如Dexie.js简化使用。
基本上就这些。选择哪种方案取决于数据大小、生命周期、是否需要跨域或服务端通信等因素。合理组合使用，能有效提升用户体验和应用性能。
