【前端】cookie和web stroage（localStorage，sessionStorage）的使用方法及区别

在Web开发中，Cookie和Web Storage（包括localStorage和sessionStorage）都是客户端存储技术，但用途和特性不同。下面详细说明它们的使用方法及区别：

---

一、Cookie

用途 ：主要用于会话管理、个性化设置和用户跟踪（如登录状态），可自动随HTTP请求发送到服务器。
特性：

• 最大容量约 4KB
• 可设置过期时间（若不设置则为会话级Cookie，关闭浏览器失效）
• 通过HTTP头或JavaScript读写
• 每次请求自动附加在Cookie请求头中

1. 通过JavaScript操作

// 设置Cookie（带过期时间）
document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

// 读取所有Cookie
const cookies = document.cookie; // "username=John; auth_token=abc123"

// 删除Cookie（设置过期时间为过去）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

2. 通过HTTP Header（服务器端）

# 服务器响应头设置Cookie
HTTP/1.1 200 OK
Set-Cookie: sessionId=abc123; Expires=Wed, 21 Oct 2026 07:28:00 GMT; Secure; HttpOnly

3. 封装Cookie工具函数

// 设置Cookie
function setCookie(name, value, days) {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  document.cookie = `${name}=${value}; expires=${date.toUTCString()}; path=/`;
}

// 读取Cookie
function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (let cookie of cookies) {
    const [key, val] = cookie.trim().split('=');
    if (key === name) return decodeURIComponent(val);
  }
  return null;
}

// 删除Cookie
function deleteCookie(name) {
  setCookie(name, '', -1); // 过期时间设为过去
}

---

二、Web Storage（localStorage 和 sessionStorage）

用途 ：存储较大数据（5MB+），不与服务器自动通信，适合客户端临时数据。
特性：

• 仅通过JavaScript操作
• 不随HTTP请求发送
• 键值对形式存储（字符串）

1. localStorage

生命周期：永久存储，除非手动清除。

// 保存数据
localStorage.setItem('theme', 'dark');

// 读取数据
const theme = localStorage.getItem('theme'); // "dark"

// 删除单个数据
localStorage.removeItem('theme');

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

2. sessionStorage

生命周期：仅限当前浏览器标签页，关闭标签页后清除。

// 使用方式同localStorage
sessionStorage.setItem('tempData', JSON.stringify({ id: 1 }));
const data = JSON.parse(sessionStorage.getItem('tempData'));

---

三、核心区别

特性	Cookie	Web Storage
容量	约 4KB	约 5MB+
是否自动发到服务器	是（通过HTTP头）	否
生命周期	可设置过期时间	localStorage永久，sessionStorage标签页关闭失效
访问权限	服务器和客户端均可读写	仅客户端JavaScript
存储类型	字符串	字符串（需序列化对象）

---

四、使用场景建议

• Cookie：

  • 用户认证（如JWT Token）
  • 保存语言偏好等小数据
  • 注意：敏感数据需设置HttpOnly和Secure防XSS

• localStorage：

  • 长期保存客户端配置（如主题、字体大小）
  • 缓存静态资源数据（减少网络请求）

• sessionStorage：

  • 单次会话的临时数据（如表单草稿）
  • 页面间传递一次性参数

---

五、安全注意事项

1. 敏感数据避免存Cookie ：防止XSS攻击，对敏感Token设置HttpOnly。

2. Web Storage不存储密码：易被XSS攻击窃取，用后及时清除。

3. 序列化数据 ：

   // 存对象
   localStorage.setItem('user', JSON.stringify({ name: 'Alice' }));
   // 取对象
   const user = JSON.parse(localStorage.getItem('user'));

---

掌握这些技术后，可根据实际需求选择合适的存储方案！