如何区分 Cookies、sessionStorage 与 localStorage？

Cookies、sessionStorage 和 localStorage 是浏览器提供的本地存储机制，主要用于客户端数据存储，它们在写入方式、生命周期、存储空间、共享规则和网络传输行为上存在显著差异。作为一名面试者，建议从以下几个维度准确区分它们：

1. 写入方式
   • Cookies：通常由服务器通过 HTTP 响应头 Set-Cookie 字段设置，但也可以通过客户端 JavaScript 使用 document.cookie API 写入。代码示例：

     // 客户端设置 cookie
     document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";
     

     • 应用场景：主要处理服务器端发起的会话逻辑，如身份验证凭据（例如 SessionID）。
   • sessionStorage 和 localStorage：均由前端使用 HTML5 Web Storage API 设置和读写。示例代码：

     // localStorage 操作
     localStorage.setItem('key', 'value'); // 设置数据
     localStorage.getItem('key'); // 读取数据
     
     // sessionStorage 操作（语法相同）
     sessionStorage.setItem('key', 'value');
     sessionStorage.getItem('key');
     

     • 共同点：不依赖服务器介入。
2. 生命周期与有效性
   • Cookies：服务器设置时指定过期时间（通过 expires 属性），过期前持久有效，即使关闭浏览器；如未设置则默认为会话级，关闭后自动清除。
   • sessionStorage：仅在当前标签页或窗口有效，关闭即被清除，适用于临时会话数据。
   • localStorage：永久存储，除非手动清除浏览器缓存，适用于持久数据缓存。
3. 存储空间限制
   • Cookies：每个键值对大小约 4KB，适合少量数据（如身份令牌）。
   • sessionStorage 和 localStorage：每个域名可达 5MB 或更大，适合大量结构化数据。
4. 共享规则
   • Cookies：遵循同源原则（相同协议、域名和端口），共享至子域，并可通过设置域路径限制可见性。
   • sessionStorage：仅在同一标签页同源页面间共享，新标签页中无法访问。
   • localStorage：在同源窗口间共享。
5. HTTP 请求行为
   • Cookies：自动随所有同源 HTTP 请求传递到服务器（包含在请求头 Cookie 中），可能导致网络效率降低。
   • sessionStorage 和 localStorage：数据仅保留在客户端，不会自动传输到服务器。
6. 典型应用场景
   • Cookies：存储用户状态或认证信息（如 token）、设置偏好主题，适合需服务器识别的流程。
   • sessionStorage：临时缓存表单输入、购物车数据或页面会话状态，随页关闭自动重置。
   • localStorage：长期存储不易变动数据（如用户历史或 UI 配置），提升页面性能并减少冗余请求。

综合对比表更便于理解：

特性	Cookies	sessionStorage	localStorage
写入方	主要服务器、可选客户端	客户端 (HTML5 API)	客户端 (HTML5 API)
生命周期	过期时间设定（默认会话级）	标签页关闭时清除	手动清除持久保留
大小限制	约 4KB/项	共享约 5MB/域名	共享约 5MB/域名
共享规则	同源全子域全局共享	仅限同级标签页同源页面	同源窗口全局共享
HTTP传输	自动在请求头携带	无网络传输	无网络传输
适用场景	用户身份验证会话、认证	临时会话数据表单缓存	本地大数据缓配置持久化存储

这些区别在日常开发中指导合理存储使用：优先 sessionStorage 用于敏感敏感临时数据，localStorage 优化离线应用性能，避免用 cookies 存储大量数据以提升请求效率。 cookie与sessionStorage、localStorage的区别 cookie、localStorage 和SessionStorage的区别和特点？