`localStorage`、`sessionStorage` 和 `cookie`的区别

在前端开发中，localStorage、sessionStorage 和 cookie 是常用的客户端存储方式，它们的主要区别如下：

1. 生命周期

• localStorage
  数据会永久存储，除非手动清除（如用户主动删除或通过代码清除）。关闭浏览器或重启电脑后数据依然存在。

• sessionStorage
  数据仅在当前会话期间有效。当页面关闭或浏览器标签页关闭后，数据会被自动清除。即使同一网站在不同标签页打开，它们的 sessionStorage 也是相互独立的。

• cookie
  可以设置过期时间（通过 expires 或 max-age 属性）。如果不设置，则在浏览器关闭后失效（会话级 cookie）。

2. 存储大小

• localStorage / sessionStorage
  通常支持 5-10MB 的存储容量（不同浏览器可能有所差异）。

• cookie
  存储容量较小，一般限制在 4KB 左右。

3. 数据发送

• localStorage / sessionStorage
  数据仅存储在客户端，不会随 HTTP 请求自动发送到服务器。

• cookie
  数据会随 HTTP 请求自动发送到服务器（包含在请求头的 Cookie 字段中），因此可能影响性能。服务器也可以通过响应头 Set-Cookie 来设置 cookie。

4. 可见性

• localStorage / sessionStorage
  数据只能在同源（相同域名、协议、端口）的页面间共享。不同浏览器窗口或标签页之间，如果是同源的，则 localStorage 数据共享，但 sessionStorage 独立。

• cookie
  数据可以通过设置 path 和 domain 属性来控制可见范围。例如，设置 domain=example.com 可以让所有子域名访问该 cookie。

5. 安全性

• localStorage / sessionStorage
  不参与服务器通信，因此不存在 CSRF（跨站请求伪造）风险，但存在 XSS（跨站脚本攻击）风险（攻击者可能通过脚本读取存储的数据）。

• cookie
  通过设置 HttpOnly 属性可以防止 XSS 攻击（禁止 JavaScript 访问 cookie），设置 Secure 属性可以确保 cookie 只通过 HTTPS 传输。但仍需防范 CSRF 攻击。

6. 应用场景

• localStorage

  • 缓存长期使用的数据，如用户偏好设置、离线应用数据。
  • 跨页面共享数据（如同源的不同标签页）。

• sessionStorage

  • 临时保存同一会话的数据，如表单数据、购物车信息。
  • 防止数据在页面关闭后被误用。

• cookie

  • 身份验证（如 session ID）。
  • 跟踪用户行为（如分析工具的访问记录）。
  • 需要在客户端和服务器间传递的数据。

代码示例对比

// localStorage
localStorage.setItem('username', 'john');      // 存储数据
const username = localStorage.getItem('username');  // 获取数据
localStorage.removeItem('username');          // 删除数据
localStorage.clear();                        // 清空所有数据

// sessionStorage
sessionStorage.setItem('cartItem', 'apple');
const cartItem = sessionStorage.getItem('cartItem');

// cookie
document.cookie = 'name=john; expires=Thu, 01 Jan 2026 00:00:00 UTC; path=/';  // 设置带过期时间的 cookie
document.cookie = 'temp=value; path=/';  // 会话级 cookie（浏览器关闭后失效）

// 读取 cookie（需解析 document.cookie 字符串）
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

总结

根据具体需求选择合适的存储方式，可以提高应用性能和安全性。