一、核心特性对比

特性	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）防止恶意脚本