删除 Cookie

问题

如何删除一个 Cookie？

解答

JavaScript 没有提供直接删除 Cookie 的方法。删除 Cookie 的原理是将其过期时间设置为过去的时间。

基本方法

// 删除名为 "username" 的 cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

使用 max-age

// max-age=0 或负值表示立即过期
document.cookie = "username=; max-age=0";

封装删除函数

function deleteCookie(name, path = '/', domain = '') {
  let cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
  
  // path 必须与设置时一致
  cookie += `; path=${path}`;
  
  // 如果设置了 domain，也需要匹配
  if (domain) {
    cookie += `; domain=${domain}`;
  }
  
  document.cookie = cookie;
}

// 使用
deleteCookie('username');
deleteCookie('token', '/', '.example.com');

完整示例

// 设置 cookie
function setCookie(name, value, days) {
  const expires = new Date(Date.now() + days * 864e5).toUTCString();
  document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
}

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

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

// 测试
setCookie('user', 'john', 7);
console.log(getCookie('user')); // "john"

deleteCookie('user');
console.log(getCookie('user')); // null

关键点

• Cookie 没有直接删除的 API，通过设置过期时间为过去来实现删除
• expires 设为过去时间或 max-age 设为 0/负值都可以
• 删除时 path 必须与设置时一致，否则删除失败
• 如果设置了 domain，删除时也要指定相同的 domain
• HttpOnly 的 Cookie 无法通过 JavaScript 删除，只能由服务端处理