Cookie、LocalStorage 和 SessionStorage 的区别是什么？ - 面试题面试题 | 播面

基于本文回答

0

评论

知识点图片

Cookie、LocalStorage 和 SessionStorage 都是浏览器端用于存储数据的机制，但它们在存储大小、生命周期、与服务器的通信以及作用域上有显著的区别。

以下是详细的对比总结：

1. 核心区别对比表

特性	Cookie	LocalStorage	SessionStorage
生命周期	可设置过期时间。若不设置，则为会话级（关闭浏览器失效）。	永久有效，除非手动删除或代码清除。	仅当前会话有效，关闭标签页或窗口即失效。
数据大小	很小，通常限制在 4KB 左右。	较大，通常为 5MB 左右。	较大，通常为 5MB 左右。
与服务器通信	自动携带。每次 HTTP 请求都会包含在 Header 中发送给服务器。	不参与通信。仅保存在客户端，不自动发给服务器。	不参与通信。仅保存在客户端，不自动发给服务器。
易用性 (API)	原生 API 较难用 (`document.cookie` 是字符串)，通常需封装。	API 简单好用 (`setItem`, `getItem`)。	API 简单好用 (`setItem`, `getItem`)。
作用域	所有同源窗口/标签页共享。	所有同源窗口/标签页共享。	不共享。仅限当前标签页（即使是同源）。

2. 详细解析

🍪 Cookie

设计初衷：最初不是为了本地存储，而是为了维持服务器状态（如 HTTP 是无状态协议，需要 Cookie 来识别用户身份）。
性能影响：因为每次请求（包括图片、脚本等静态资源）都会携带 Cookie，如果 Cookie 数据过大，会浪费带宽，影响性能。
安全性：
- 容易受到 CSRF（跨站请求伪造）攻击。
- 如果设置了 HttpOnly 属性，JavaScript 将无法读取 Cookie，可防止 XSS 攻击窃取 Cookie。
主要用途：存储 Session ID、Token（身份验证令牌）、用户登录状态。

🏠 LocalStorage

设计初衷：HTML5 专门为本地持久化存储设计的。
特点：数据永久保存在硬盘上，除非用户清理浏览器缓存或通过 JS 代码删除，否则永不过期。
主要用途：长期保存的数据，如：
- 用户偏好设置（深色模式/浅色模式）。
- 购物车数据（未登录状态下）。
- 长期免登录的 Token（虽然存在安全争议，但很常见）。

📑 SessionStorage

设计初衷：为单次会话提供临时存储。
特点：
- 生命周期与标签页（Tab）绑定。关闭标签页，数据就没了。
- 注意：如果在当前标签页打开同域的新链接（跳转），数据还在；但如果新开一个标签页访问同一个网站，SessionStorage 是不共享的（这是它和 LocalStorage/Cookie 最大的区别）。
主要用途：
- 表单数据的临时保存（防止刷新丢失）。
- 单页应用（SPA）中的临时状态管理。
- 敏感的一次性数据。

3. 总结：该怎么选？

需要发给服务器吗？
- 是 $\rightarrow$ Cookie (通常用于鉴权)。
- 否 $\rightarrow$ LocalStorage 或 SessionStorage。
数据需要保存多久？
- 永久/长期 $\rightarrow$ LocalStorage。
- 仅当前页面/会话 $\rightarrow$ SessionStorage。
数据量大吗？
- 超过 4KB $\rightarrow$ 必须用 LocalStorage 或 SessionStorage。

4. 代码示例

Cookie (原生写法很麻烦):

javascript

document.cookie = "username=John; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

LocalStorage / SessionStorage (API 一致):

javascript

// 存
localStorage.setItem('theme', 'dark');
sessionStorage.setItem('tempData', '123');

// 取
const theme = localStorage.getItem('theme');

// 删
localStorage.removeItem('theme');

// 清空所有
localStorage.clear();

00:00

00:00