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

基于本文回答

0

评论

知识点图片

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

以下是详细的对比总结：

1. 核心区别对比表

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

2. 详细解析

Cookie

初衷：Cookie 最初不是为了本地存储设计的，而是为了解决 HTTP 协议无状态的问题，用于告诉服务器“我是谁”（维持状态）。
性能影响：因为每次请求（包括图片、脚本等静态资源）都会携带 Cookie，如果 Cookie 数据过大，会严重影响网络性能。
安全性：
- HttpOnly：设置为 true 时，JS 无法读取，可防止 XSS 攻击窃取 Cookie。
- Secure：设置为 true 时，仅在 HTTPS 连接中传输。
主要用途：存储 Session ID、Token（配合 HttpOnly）、用户登录状态。

LocalStorage

特点：它是 HTML5 专门为“本地存储”设计的。数据是持久化的，即使用户关闭浏览器、重启电脑，数据依然存在，直到用户手动清理浏览器缓存或代码调用 localStorage.removeItem()。
主要用途：长期保存的数据，如：用户的主题偏好（深色模式）、长期免登录信息（不敏感数据）、购物车数据（未登录状态）。

SessionStorage

特点：与 LocalStorage 类似，但生命周期更短。它严格绑定在当前的“标签页”或“窗口”。
- 注意：如果你在一个标签页中打开了页面，然后通过 window.open 或链接打开了一个新标签页，虽然是同源，但 SessionStorage 是隔离的（或者是复制了一份初始值，之后互不影响）。
主要用途：敏感的一次性数据、表单分步填写的信息（防止刷新丢失，但关闭后不需要保留）、单页应用（SPA）中的临时状态。

3. 总结：该如何选择？

需要与服务器交互吗？
- 是 $\rightarrow$ Cookie (如身份认证 Token)。
- 否 $\rightarrow$ Web Storage (Local/Session)。
数据需要保存多久？
- 永久/长期 $\rightarrow$ LocalStorage。
- 仅当前浏览过程 $\rightarrow$ SessionStorage。
数据量大吗？
- 超过 4KB $\rightarrow$ LocalStorage / SessionStorage。
- 极小且需传给后端 $\rightarrow$ Cookie。

4. 代码示例

Cookie (原生写法很麻烦):

javascript

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

LocalStorage / SessionStorage (API 一致):

javascript

// 存
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');

// 取
const val = localStorage.getItem('key');

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

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

00:00

00:00