JavaScript篇：浏览器存储三剑客：Cookie、localStorage和sessionStorage全解析

🎓 作者简介： 前端领域优质创作者

🚪 资源导航： 传送门=>

💬 个人微信: y_t_t_t_ 📱

📌 座右铭: 生活就像心电图，一帆风顺就证明你挂了。 💔

👥 QQ群: 906392632 (前端技术交流群) 💬

大家好，我是[小杨]，今天我们来聊聊前端开发中常用的三种浏览器存储方式。很多新手对Cookie、localStorage和sessionStorage傻傻分不清楚，其实它们各有特点，适用于不同的场景。下面我就用通俗易懂的方式带大家彻底搞懂它们的区别。

1. 三种存储方式速览

先来看个简单对比表，有个整体印象：

特性	Cookie	localStorage	sessionStorage
容量	4KB左右	5MB左右	5MB左右
生命周期	可设置过期时间	永久存储	会话级别（关闭标签页消失）
是否随请求发送	是（会增加请求头大小）	否	否
访问范围	同源下所有窗口	同源下所有窗口	仅当前窗口
API易用性	操作较麻烦	简单易用	简单易用

2. 深入理解每种存储方式

2.1 Cookie - 老牌但依旧重要

// 设置Cookie
document.cookie = "username=我; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

// 读取Cookie
console.log(document.cookie); // 输出所有Cookie字符串

// 实际应用：记住登录状态
function setLoginCookie(userId) {
  const date = new Date();
  date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7天后过期
  document.cookie = `userId=${userId};expires=${date.toUTCString()};path=/`;
}

特点：

每次HTTP请求都会自动携带，影响性能
需要手动处理字符串格式
适合存储小量且需要服务器访问的数据

2.2 localStorage - 本地持久化存储利器

// 存储数据
localStorage.setItem('userInfo', JSON.stringify({name: "我", age: 25}));

// 读取数据
const user = JSON.parse(localStorage.getItem('userInfo'));
console.log(user.name); // 输出"我"

// 实际应用：保存用户偏好设置
function saveThemePreference(theme) {
  localStorage.setItem('appTheme', theme);
}

// 清除数据
localStorage.removeItem('userInfo'); // 删除特定项
localStorage.clear(); // 清空所有

特点：

存储容量大（约5MB）
数据永久保存，除非手动清除
仅在客户端存储，不会随请求发送

2.3 sessionStorage - 临时会话存储专家

// 存储数据
sessionStorage.setItem('tempData', '这是临时数据');

// 读取数据
console.log(sessionStorage.getItem('tempData')); // 输出"这是临时数据"

// 实际应用：表单页面刷新时保留已填写内容
window.addEventListener('beforeunload', () => {
  const formData = {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value
  };
  sessionStorage.setItem('unsavedFormData', JSON.stringify(formData));
});

// 页面加载时恢复数据
window.addEventListener('load', () => {
  const savedData = sessionStorage.getItem('unsavedFormData');
  if (savedData) {
    const formData = JSON.parse(savedData);
    // 填充表单...
  }
});

特点：

数据仅在当前会话有效（关闭标签页即消失）
不同标签页即使同源也不共享
适合存储临时性的敏感数据

3. 安全注意事项

不要存储敏感信息：三种方式都不适合存储密码等敏感数据
防范XSS攻击：恶意脚本可以读取这些存储

Cookie的HttpOnly和Secure标记：

// 安全设置示例（通常由后端设置）
document.cookie = "token=abc123; HttpOnly; Secure; SameSite=Strict";

4. 实际开发如何选择？

需要服务器访问的数据 → Cookie
长期保存的本地数据 → localStorage
临时性的会话数据 → sessionStorage
较大数据且不需要服务器访问 → IndexedDB（超出本文范围）

5. 常见问题解答

Q：为什么我的Cookie设置不成功？
A：可能是域名、路径或Secure设置问题，检查这些属性是否正确

Q：localStorage存储满了怎么办？
A：可以捕获异常并清理旧数据：

try {
  localStorage.setItem('bigData', largeData);
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    localStorage.clear();
    // 提示用户或采取其他措施
  }
}

Q：如何监听存储变化？
A：可以使用storage事件：

window.addEventListener('storage', (event) => {
  console.log(`存储发生变化：${event.key}被修改`);
});

6. 总结

Cookie：小容量，随请求发送，适合身份验证
localStorage：大容量，永久存储，适合用户偏好
sessionStorage：会话级别，标签页独立，适合临时数据

掌握这三种存储方式的特性，就能在项目中游刃有余地选择合适的存储方案了。如果觉得有帮助，别忘了点赞收藏哦！