JavaScript如何实现本地存储_cookie和localStorage有什么区别？

JavaScript本地存储主要靠Cookie和localStorage实现：Cookie随HTTP请求自动收发，容量小、可设过期时间、支持HttpOnly；localStorage纯客户端存储、容量大、永久保存、无自动传输、不支持过期机制。

JavaScript 中的本地存储主要靠 Cookie 和 localStorage 实现，但它们设计目标、使用方式和限制完全不同。简单说：Cookie 是为“通信”服务的，会随 HTTP 请求自动发送；localStorage 是为“前端数据缓存”服务的，纯客户端保存，不参与网络传输。

Cookie：带状态的 HTTP 小信封

Cookie 是服务器通过 Set-Cookie 响应头写入浏览器的小文本片段，后续同域请求时浏览器自动附在 Cookie 请求头中发回。它天生和 HTTP 协议绑定。

• 容量小：单个 Cookie 一般不超过 4KB，一个域名下总大小通常限制在 4–5KB
• 默认无有效期：关闭浏览器即失效（会话 Cookie）；可设 Expires 或 Max-Age 变成持久 Cookie
• 支持路径（Path）、域名（Domain）、安全标记（Secure）、HttpOnly 等属性
• document.cookie 是一个字符串接口，读写都需手动解析，比如：
  设置：document.cookie = "user=abc; expires=Fri, 31 Dec 2027 23:59:59 GMT; path=/;"
  读取：需用字符串分割或正则提取，没有原生 get/set 方法
• 敏感信息慎存：若未设 HttpOnly，JS 可读写，有 XSS 泄露风险

localStorage：纯前端的键值数据库

localStorage 是 Web Storage API 的一部分，完全由 JavaScript 控制，数据仅存在浏览器本地，不会随任何 HTTP 请求发送。

• 容量大：通常 5–10MB（各浏览器不同），远超 Cookie
• 永久存储：除非手动清除（localStorage.removeItem() 或 localStorage.clear()），否则一直存在
• 同源限制：仅当前协议+域名+端口可访问，不能跨域共享
• 只支持字符串：存对象需 JSON.stringify()，取时用 JSON.parse()
• 操作简单：localStorage.setItem("key", "value")、localStorage.getItem("key")、localStorage.removeItem("key")
• 不支持过期机制：如需时效性，得自己存时间戳并在读取时判断

关键区别一目了然

• 传输行为：Cookie 自动收发；localStorage 完全静默，不走网络
• 作用域控制：Cookie 可通过 Domain 和 Path 精细控制；localStorage 只看完整同源
• 安全性侧重点：Cookie 靠 HttpOnly 防 XSS 读取；localStorage 全靠前端逻辑防护，XSS 下极易被窃取
• 适用场景：登录态 token（短时效）常用 Cookie（配合 HttpOnly + Secure）；用户偏好、页面缓存、表单草稿等适合 localStorage

别忽略 sessionStorage

顺带提一下 sessionStorage：它和 localStorage 接口一致，但数据只在当前浏览器标签页生命周期内有效，关闭标签即清空。适合临时状态，比如多步骤表单的中间数据。