javascript如何实现本地存储_cookie与localStorage有何区别？

JavaScript本地存储应按需选用cookie或localStorage：cookie用于身份认证等需服务端交互的小数据，支持HttpOnly防XSS；localStorage适合前端大容量状态存储，但易受XSS攻击。

JavaScript 中的本地存储主要靠 cookie 和 localStorage 实现，但它们的设计目标、容量、生命周期和使用方式差异明显。选错方案容易导致数据丢失、安全风险或功能异常。

cookie：带服务端通信的小型文本存储

cookie 是最早期的客户端存储机制，本质是键值对字符串，随每次 HTTP 请求自动发送到服务器（除非标记为 HttpOnly）。它主要用于身份认证（如 session ID）、用户偏好同步等需要前后端协同的场景。

• 单个 cookie 最大 4KB，一个域名下总数量和大小受浏览器限制（通常 50–100 个）
• 可设置过期时间（Expires 或 Max-Age），不设则为会话级（关闭浏览器即失效）
• 支持 Secure（仅 HTTPS 传输）、HttpOnly（JS 无法读取，防 XSS）、SameSite（防 CSRF）等安全属性
• 操作需手动拼接字符串，原生 API 不友好：
  document.cookie = "user=jack; expires=Thu, 01 Jan 2030 00:00:00 GMT; path=/; Secure"

localStorage：纯前端的大容量持久化存储

localStorage 是 HTML5 提供的 Web Storage API 之一，数据仅保存在浏览器本地，不会随请求发往服务器，适合存用户界面状态、缓存非敏感数据等。

标签： javascript java html js 前端 json html5 cookie 浏览器 端口 session