在前端面试中，localStorage 和 cookie 是高频考点，它们的核心区别可以从以下几个维度对比：

1. 存储大小

• cookie：容量很小，通常限制在 4KB 左右，适合存储少量数据（如会话标识）。

• localStorage：容量较大，一般为 5MB 或更多（不同浏览器略有差异），适合存储较多本地数据（如用户偏好设置、离线缓存）。

2. 有效期

• cookie：可通过 expires 或 max-age 设置过期时间，到期后自动删除；若不设置，则为「会话级」（关闭浏览器后失效）。

• localStorage：永久存储，除非手动通过代码删除（localStorage.removeItem()）或用户清理浏览器数据，否则会一直保留在本地。

3. 与服务器的交互

• cookie：每次 HTTP 请求都会自动携带在请求头中（随请求发送到服务器），服务器也可以通过响应头 Set-Cookie 修改 cookie。

（注意：过多的 cookie 会增加请求体积，影响性能）

• localStorage：完全存储在客户端，不会自动发送到服务器，仅在前端通过 JS 访问，与服务器交互需手动编写代码（如通过 AJAX 上传）。

4. 访问权限与作用域

• cookie：可通过 domain 和 path 属性限制访问范围（如指定仅某域名或路径下的页面可访问）；支持跨域共享（需配合 CORS 和 withCredentials）。

• localStorage：严格遵循同源策略（协议、域名、端口必须完全一致），不同源的页面无法相互访问对方的 localStorage。

5. 安全性

• cookie：支持 httpOnly（禁止 JS 访问，防止 XSS 攻击）、secure（仅 HTTPS 传输）、SameSite（限制跨站请求携带，防 CSRF 攻击）等安全属性。

• localStorage：无这些安全属性，且完全暴露给 JS，若页面存在 XSS 漏洞，localStorage 中的数据可能被恶意脚本窃取。

6. 典型使用场景

• cookie：适合存储与服务器交互相关的数据，如会话 ID（登录状态）、用户身份标识等。

• localStorage：适合存储仅前端使用的本地数据，如用户主题设置、离线缓存的列表数据等。

总结表格

理解这些区别，能帮助在实际开发中选择合适的存储方案，也是面试中考察对前端存储机制掌握程度的核心点。