Cookie 和 LocalStorage 有什么区别？在什么场景下使用哪种存储方式？

Cookie 和 LocalStorage 都是浏览器提供的客户端存储机制，但它们在容量、作用域、API 和使用场景上有重要区别。

容量限制

• Cookie：每个 Cookie 约 4KB，每个域名约 50-100 个
• LocalStorage：每个域名约 5-10MB

数据传输

• Cookie：每次 HTTP 请求都会自动发送到服务器
• LocalStorage：不会自动发送，需要手动通过 JavaScript 读取

API 操作

• Cookie：通过 document.cookie 字符串操作，需要手动解析
• LocalStorage：提供简洁的键值对 API（setItem、getItem、removeItem）

过期时间

• Cookie：可设置过期时间或会话级别
• LocalStorage：永久存储，除非手动删除或清除浏览器数据

作用域

• Cookie：可通过 Domain 和 Path 属性精确控制作用域
• LocalStorage：同源策略，仅在同域名、同协议、同端口下共享

安全性

• Cookie：可设置 HttpOnly 防止 JavaScript 访问
• LocalStorage：完全可被 JavaScript 访问，不适合存储敏感信息

使用场景对比

• Cookie：会话管理、CSRF 防护、服务器需要的数据
• LocalStorage：用户偏好设置、缓存数据、离线应用数据

代码示例

javascript
// Cookie 操作
document.cookie = "name=value; expires=...; path=/";

// LocalStorage 操作
localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');

选择建议

• 需要发送到服务器的数据用 Cookie
• 纯客户端数据用 LocalStorage
• 敏感信息用 Cookie + HttpOnly
• 大量数据用 LocalStorage