如何在 JavaScript 中操作 Cookie？请提供设置、读取和删除 Cookie 的代码示例。 - 面试题

在 JavaScript 中操作 Cookie 主要通过 document.cookie 属性实现，它是一个包含所有 Cookie 的字符串。

读取 Cookie

javascript
// 获取所有 Cookie
const allCookies = document.cookie;

// 解析特定 Cookie
function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (let cookie of cookies) {
    const [key, value] = cookie.trim().split('=');
    if (key === name) {
      return decodeURIComponent(value);
    }
  }
  return null;
}

设置 Cookie

javascript
function setCookie(name, value, options = {}) {
  let cookieString = `${name}=${encodeURIComponent(value)}`;
  
  if (options.expires) {
    cookieString += `; Expires=${options.expires.toUTCString()}`;
  }
  
  if (options.maxAge) {
    cookieString += `; Max-Age=${options.maxAge}`;
  }
  
  if (options.path) {
    cookieString += `; Path=${options.path}`;
  }
  
  if (options.domain) {
    cookieString += `; Domain=${options.domain}`;
  }
  
  if (options.secure) {
    cookieString += '; Secure';
  }
  
  if (options.httpOnly) {
    // HttpOnly 不能通过 JavaScript 设置
    console.warn('HttpOnly cannot be set via JavaScript');
  }
  
  if (options.sameSite) {
    cookieString += `; SameSite=${options.sameSite}`;
  }
  
  document.cookie = cookieString;
}

使用示例

javascript
// 设置会话 Cookie
setCookie('username', 'john');

// 设置持久 Cookie（7天）
const expires = new Date();
expires.setDate(expires.getDate() + 7);
setCookie('userId', '123', { expires, path: '/' });

// 设置安全 Cookie
setCookie('token', 'abc123', {
  secure: true,
  sameSite: 'Strict'
});

// 读取 Cookie
const username = getCookie('username');

删除 Cookie

javascript
function deleteCookie(name, path = '/') {
  document.cookie = `${name}=; Expires=Thu, 01 Jan 1970 00:00:00 GMT; Path=${path}`;
}

注意事项

Cookie 值需要编码（encodeURIComponent）
HttpOnly Cookie 无法通过 JavaScript 操作
每次设置只能设置一个 Cookie
Cookie 大小限制约 4KB