Cookie适用于身份认证，服务端可读写且每次请求自动携带；LocalStorage适合存储用户偏好等前端数据，不随请求发送。2. Cookie单域名约4KB，增加网络开销；LocalStorage可达5~10MB，读写更快。3. Cookie可设过期时间或会话级，支持HttpOnly增强安全；LocalStorage持久化存储，仅同源访问。4. 敏感信息如token应存于HttpOnly Cookie以防XSS；避免在LocalStorage保存密码或长期令牌。根据数据用途、容量、生命周期和安全需求合理选择方案。
在网页开发中，浏览器存储是前端与用户状态管理的重要部分。面对不同的存储需求，合理选择 Cookie 或 LocalStorage 能提升性能和安全性。下面从使用场景、特性差异和实际建议出发，帮你做出合适选择。
1. 数据用途与场景区分
不同存储方式适合不同的业务逻辑：
- Cookie：主要用于身份认证，比如保存登录态（session token），服务端可读写，每次请求自动携带到服务器。
- LocalStorage：适合存储较大体积的前端数据，如用户偏好设置、页面缓存、表单草稿等，仅在客户端使用，不会随请求发送。
2. 容量与性能对比
两者在容量和传输行为上有明显差别：
- Cookie 单个域名限制约 4KB，且每个 HTTP 请求都会携带，过多使用会增加网络开销。
- LocalStorage 可达 5~10MB，不参与网络传输，读写更快，适合频繁操作的本地数据。
3. 生命周期与作用域控制
根据数据保留时间选择合适机制：
- Cookie 可设置过期时间（Expires）或会话级（Session），支持跨页面共享，也能通过 HttpOnly 防止 XSS 攻击。
- LocalStorage 持久化存储，除非手动清除，否则一直存在；仅限同源访问，不能被服务端直接读取。
4. 安全性考虑
安全要求高的信息需谨慎处理：
- 敏感数据如 token 建议用 HttpOnly Cookie 存储，避免 JS 访问，降低 XSS 风险。
- 不要在 LocalStorage 中保存密码或长期有效的令牌，容易被恶意脚本窃取。
基本上就这些。需要自动传给后端的状态用 Cookie，大容量或纯前端使用的数据选 LocalStorage。结合安全策略和实际需求，才能用得稳又安全。
