前端数据存储localStorage、sessionStorage 与 Cookie
localStorage、sessionStorage 与 Cookie这三种技术都允许在浏览器端存储数据,但它们在设计目的、生命周期、作用域和与服务器的交互方式上有显著区别。
一、详细介绍
1. Cookie
Cookie 是为服务器端脚本设计的,主要用于在客户端存储少量会话或状态信息。
生命周期:
通过
Expires
或Max-Age
属性设置过期时间。如果没有设置,则为“会话Cookie”,在浏览器关闭时失效。
与服务器的交互:
浏览器会自动在每次 HTTP 请求的
Cookie
请求头中携带所有符合条件的 Cookie。服务器通过
Set-Cookie
响应头来设置或更新客户端的 Cookie。
安全相关属性:
HttpOnly
: 防止 JavaScript 通过document.cookie
访问,有效防范 XSS 攻击。Secure
: 只允许通过 HTTPS 协议传输。SameSite
: 控制 Cookie 在跨站请求时是否被发送,用于防范 CSRF 攻击。Strict
: 完全禁止跨站携带。Lax
: 宽松策略,部分导航(如链接跳转)会携带。None
: 允许跨站携带(必须与Secure
属性一同设置)。
示例代码:
// 设置 Cookie (原生 API)
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";// 读取 Cookie (原生 API)
console.log(document.cookie); // 输出: "username=John Doe; someOtherCookie=value"// 删除 Cookie (通过设置过期时间为过去)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
2. localStorage
localStorage 是 Web Storage API 的一部分,用于在浏览器中存储持久化数据,数据不会过期,除非手动清除。
生命周期: 数据永久存储,即使关闭浏览器或重启电脑也不会丢失。只能通过 JavaScript、清除浏览器数据或浏览器扩展来删除。
作用域: 在同一协议+域名+端口(即同源)的所有页面和标签页中共享。
存储事件: 当其他标签页修改了 localStorage 时,当前标签页可以监听到
storage
事件,从而实现多标签页通信。
示例代码:
// 存储数据
localStorage.setItem('theme', 'dark');
localStorage.setItem('userSettings', JSON.stringify({ fontSize: 14, notifications: true }));// 读取数据
const theme = localStorage.getItem('theme'); // 'dark'
const settings = JSON.parse(localStorage.getItem('userSettings')); // { fontSize: 14, notifications: true }// 删除特定数据
localStorage.removeItem('theme');// 清空所有 localStorage 数据
localStorage.clear();
3. sessionStorage
sessionStorage 与 localStorage 同属 Web Storage API,但其数据生命周期与浏览器会话绑定。
生命周期: 数据仅在当前浏览器标签页或窗口的生命周期内有效。刷新页面数据依然存在,但关闭标签页/浏览器后,数据会被清除。
作用域: 作用域比 localStorage 更严格。它不仅受同源策略限制,还被限定在当前标签页。即使是同源的另一个标签页,也无法访问当前标签页的 sessionStorage。
例外: 通过
window.open
或从当前页面点击链接打开的同源新标签页,有时会复制源标签页的 sessionStorage(行为因浏览器而异)。
示例代码:
// 存储数据
sessionStorage.setItem('formData', JSON.stringify({ name: 'Alice', email: 'alice@example.com' }));// 读取数据
const data = JSON.parse(sessionStorage.getItem('formData'));// 删除数据
sessionStorage.removeItem('formData');// 清空所有 sessionStorage 数据
sessionStorage.clear();
二、如何选择?
根据你的具体需求来选择合适的技术:
场景 | 推荐技术 | 理由 |
---|---|---|
用户登录状态 | Cookie (设置 HttpOnly 和 Secure ) | 安全性高,每次请求自动携带,便于服务器验证。 |
长期用户偏好(如主题、语言) | localStorage | 容量大,不参与网络请求,可永久存储。 |
购物车内容 | localStorage | 容量大,即使关闭浏览器也能恢复,提升用户体验。 |
填写长表单时的临时保存 | sessionStorage | 临时存储,防止页面刷新导致数据丢失,关闭标签后自动清理。 |
不敏感的单次会话信息 | sessionStorage | 简单方便,会话结束即销毁。 |
多标签页应用状态同步 | localStorage (+ storage 事件) | 利用其共享性和事件机制,可以实现标签页间的通信。 |
三、安全注意事项
不要存储敏感信息: 绝对不要在
localStorage
、sessionStorage
或未加密的 Cookie 中存储密码、令牌、个人身份证号等敏感信息。它们很容易通过 XSS 攻击被读取。防范 XSS: 由于 Web Storage 可以通过 JavaScript 直接访问,它们极易受到 XSS 攻击。确保对用户输入进行充分的转义和过滤。
正确设置 Cookie 属性: 对于认证相关的 Cookie,务必使用
HttpOnly
、Secure
和SameSite
属性来增强安全性。