Cookie、LocalStorage 和 SessionStorage 的区别

问题

Cookie、LocalStorage 和 SessionStorage 三者之间有什么区别？

解答

生命周期

Cookie：可设置失效时间，未设置时默认关闭浏览器后失效。

LocalStorage：永久保存，除非手动清除。

SessionStorage：仅在当前会话有效，关闭页面或浏览器后清除。

存储容量

Cookie：约 4KB

LocalStorage 和 SessionStorage：约 5MB

HTTP 请求

Cookie：每次 HTTP 请求都会自动携带在请求头中，数据过多会影响性能。

LocalStorage 和 SessionStorage：仅存储在客户端，不参与服务器通信。

易用性

Cookie：原生 API 不友好，通常需要封装使用。

// Cookie 操作需要手动解析
document.cookie = "username=john; expires=Thu, 18 Dec 2025 12:00:00 UTC";

LocalStorage 和 SessionStorage：原生 API 简单易用。

// LocalStorage
localStorage.setItem('key', 'value');
localStorage.getItem('key');
localStorage.removeItem('key');

// SessionStorage
sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key');
sessionStorage.removeItem('key');

作用域

Cookie：需要指定作用域，不可跨域调用，当前页面只能读取同域的 Cookie。

LocalStorage 和 SessionStorage：遵循同源策略，同域下可访问。

使用场景

Cookie：适合用户身份认证、会话管理等需要与服务器交互的场景。

LocalStorage：适合跨页面数据传递、持久化存储用户偏好设置等。

SessionStorage：适合保存临时数据，如表单数据、页面状态等，防止刷新后丢失。

关键点

• Cookie 会在每次 HTTP 请求中自动携带，而 Storage 仅存储在客户端
• LocalStorage 永久保存，SessionStorage 关闭页面即清除
• Storage 容量（5MB）远大于 Cookie（4KB）
• Cookie 适合身份认证，Storage 适合客户端数据存储
• Cookie 需要设置作用域且不可跨域，使用上限制较多