Web存储技术详解：sessionStorage、localStorage与Cookie
一、核心特性对比
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 存储大小 | 4KB左右 | 5-10MB | 5-10MB |
| 生命周期 | 可设置过期时间 | 永久存储（除非手动清除） | 会话期间有效（标签页关闭即清除） |
| 作用域 | 同源的所有窗口 | 同源的所有窗口 | 仅当前标签页 |
| 自动发送 | 每次HTTP请求自动发送 | 不自动发送 | 不自动发送 |
| 存储位置 | 浏览器和服务器 | 仅浏览器 | 仅浏览器 |
| API易用性 | 需手动解析 | 简单键值对API | 简单键值对API |
| 安全性 | 较低（易受XSS攻击） | 较高 | 较高 |
二、API使用示例
1. Cookie操作
// 设置Cookie
document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";// 读取Cookie
function getCookie(name) {const value = `; ${document.cookie}`;const parts = value.split(`; ${name}=`);if (parts.length === 2) return parts.pop().split(';').shift();
}// 删除Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";2. localStorage操作
// 存储数据
localStorage.setItem('theme', 'dark');// 读取数据
const theme = localStorage.getItem('theme');// 删除数据
localStorage.removeItem('theme');// 清空所有
localStorage.clear();3. sessionStorage操作
// 存储数据
sessionStorage.setItem('sessionId', 'abc123');// 读取数据
const sessionId = sessionStorage.getItem('sessionId');// 删除数据
sessionStorage.removeItem('sessionId');// 清空当前会话存储
sessionStorage.clear();三、使用场景推荐
1. Cookie适用场景
用户身份认证：存储Session ID
跟踪用户行为：分析用户访问路径
个性化设置：保存语言、地区偏好（需要服务器访问时）
2. localStorage适用场景
长期用户设置：主题、字体大小等偏好
离线应用数据：缓存应用数据供离线使用
不敏感数据存储：如阅读进度、应用状态
3. sessionStorage适用场景
表单数据暂存：防止页面意外关闭丢失数据
单页应用状态：存储当前会话的临时状态
敏感数据临时存储：如支付流程中的临时令牌
四、安全最佳实践
Cookie安全：
始终使用
Secure标志（仅HTTPS）敏感Cookie设置
HttpOnly（防XSS）设置
SameSite=Strict或Lax（防CSRF）限制Cookie作用域（Domain和Path）
Web存储安全：
避免存储敏感信息（令牌、密码等）
对存储的数据进行加密
实施内容安全策略（CSP）
定期清理不再需要的数据
通用原则：
最小化存储数据量
设置合理的过期时间
提供用户控制选项（清除数据）
使用子资源完整性（SRI）防止恶意脚本