web storage（localstorage/sessionstorage）与cookie本质区别在于：容量上cookie约4kb而web storage达5–10mb；cookie自动随请求发送且受domain/path控制，web storage不参与通信、严格同源隔离；cookie用于服务端鉴权，web storage适用于前端状态管理。
Web Storage（包括 localStorage 和 sessionStorage）和 Cookie 都是浏览器端存储数据的方式，但它们在容量限制、作用域、传输机制和使用场景上有本质区别。
存储容量差异明显
Cookie 的单个域名总容量通常被限制在 4KB 左右（含键名、值、属性），超出会截断或报错；而 Web Storage 提供更大的空间：localStorage 和 sessionStorage 一般支持 5MB～10MB（具体取决于浏览器，Chrome 和 Firefox 默认约 5MB，Safari 在无痕模式下可能更低但常规模式可达 10MB）。
- Cookie 不适合存大量结构化数据，比如用户偏好设置列表或缓存的 JSON 数据
- localStorage 可安全存入几万字符的字符串（如序列化的对象），适合离线缓存、表单草稿、主题配置等
- sessionStorage 容量与 localStorage 相同，但生命周期仅限当前标签页会话，关闭即清空
数据是否随请求自动发送
Cookie 会在每次同源 HTTP 请求中自动附加到请求头（Cookie: 字段），无论是否需要，这会增加请求体积，影响性能；Web Storage 完全不会参与网络通信，所有读写都通过 JavaScript API 主动操作。
- Cookie 常用于身份认证（如 sessionid）、CSRF token 等需服务端识别的场景
- localStorage/sessionStorage 更适合纯前端状态管理，比如记住用户上次展开的菜单项、搜索历史、暗色模式开关
- 敏感信息（如 token）若存于 localStorage，需防范 XSS 攻击；Cookie 可设 HttpOnly 属性防止 JS 访问，提升安全性
作用域与生命周期控制不同
Cookie 的作用域由 Domain、Path、Secure、SameSite 等属性精细控制，可跨子域共享（如 .example.com），也可限定到 /admin 路径；Web Storage 严格按协议 + 域名 + 端口三元组划分，不支持跨域或路径级隔离。
- 同一域名下，所有标签页共享同一个 localStorage；不同 tab 的 sessionStorage 相互隔离
- Cookie 可设置过期时间（Expires/Max-Age），支持会话级（关闭浏览器失效）和持久化两种模式
- localStorage 永久存在（除非手动清除或用户主动清理），sessionStorage 关闭页面即销毁
API 使用方式与兼容性
Cookie 操作依赖 document.cookie 字符串拼接，语法繁琐且易出错；Web Storage 提供简洁的键值对 API（setItem/getItem/removeItem/clear），支持直接存取字符串，配合 JSON.stringify/parse 可处理对象。
- document.cookie = "theme=dark; path=/; max-age=86400" —— 手动构造，需注意分号与空格
- localStorage.setItem("theme", JSON.stringify({mode: "dark", fontSize: 16})) —— 更直观，不易漏属性
- 两者均获主流浏览器广泛支持（IE8+ 支持 localStorage/sessionStorage，IE7 及更早仅支持部分 Cookie）
