Web存储技术详解：sessionStorage、localStorage与Cookie

最新推荐文章于 2025-08-06 14:36:16 发布

原创最新推荐文章于 2025-08-06 14:36:16 发布 · 301 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端

HTML 专栏收录该内容

47 篇文章

订阅专栏

一、核心特性对比

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