如何删除一个 Cookie 值？

前端删除 Cookie 的核心思路是让浏览器判定它已过期，浏览器会在下次清理时自动移除。JavaScript 没有原生的 deleteCookie API，只能通过 document.cookie 重新设置同名 Cookie 来"覆盖"并使其失效。

方法一：设置 expires 为过去时间

javascript
document.cookie = 'key=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/';

这是最经典的做法，兼容所有浏览器。expires 接收一个 HTTP 日期格式的字符串，只要时间早于当前时间，浏览器就会删除该 Cookie。

方法二：设置 max-age 为 0

javascript
document.cookie = 'key=; max-age=0; path=/';

max-age 是 HTTP/1.1 的属性，单位为秒。设为 0 表示立即过期。现代浏览器优先使用 max-age，当 expires 和 max-age 同时存在时，max-age 优先生效。IE9 以下不支持 max-age，但这类浏览器已基本退出市场。

删除失败的常见原因

这是面试中最容易踩坑的地方，也是区分"背答案"和"真正理解"的分水岭。

path 和 domain 必须匹配

Cookie 的唯一标识是 name + domain + path 三元组。删除时这三项必须与原 Cookie 完全一致，否则浏览器会创建一个新 Cookie 而非删除旧的：

javascript
// 原 Cookie 设置时指定了 path=/ 和 domain=.example.com
// 删除时也必须带上相同的 path 和 domain
document.cookie = 'key=; max-age=0; path=/; domain=.example.com';

// 错误示例：漏掉 path，默认使用当前路径（如 /user）
// 这会在 /user 下创建一个新 Cookie，原来的 Cookie 仍在
document.cookie = 'key=; max-age=0'; // 删除失败

面试中经常追问：如果不指定 path，默认值是什么？ 答案是当前页面的路径（location.pathname），不是 /。这是很多人删除 Cookie 失败的首要原因。

HttpOnly 的 Cookie 前端无法删除

HttpOnly 标记的 Cookie 对 JavaScript 完全不可见，document.cookie 读取不到，自然也无法删除。只能由服务端通过 Set-Cookie 响应头来删除：

shell
Set-Cookie: key=; max-age=0; path=/; HttpOnly

子域名与父域名的权限隔离

浏览器的安全策略规定：子域名页面无法删除父域名设置的 Cookie。如果 Cookie 的 domain 是 .example.com，在 sub.example.com 页面上删除时必须指定 domain=.example.com：

javascript
// 在 sub.example.com 页面执行
document.cookie = 'key=; max-age=0; path=/; domain=.example.com';

反过来，父域名页面也无法删除子域名专属的 Cookie（即 domain 设为 sub.example.com 的 Cookie）。这是浏览器的域隔离机制，防止跨域篡改。

服务端删除 Cookie

当 Cookie 设置了 HttpOnly 或者需要确保一定删除成功时，应该由服务端通过 Set-Cookie 响应头操作：

javascript
// Node.js / Express 示例
res.setHeader('Set-Cookie', 'key=; max-age=0; path=/; HttpOnly; Secure; SameSite=Lax');

服务端删除的好处是可以操作所有属性的 Cookie，包括 HttpOnly 和 Secure 标记的。退出登录场景通常由后端统一清除认证 Cookie，前端只负责跳转。

批量删除当前域所有 Cookie

实际开发中有时需要清除当前域名下所有 Cookie（如退出登录、切换账号）：

javascript
function clearAllCookies() {
  const cookies = document.cookie.split(';');
  for (const cookie of cookies) {
    const name = cookie.split('=')[0].trim();
    // 尝试多种 path 组合，确保能匹配到
    document.cookie = `${name}=; max-age=0; path=/`;
    document.cookie = `${name}=; max-age=0`;
  }
}

注意这个方法只能删除非 HttpOnly 的 Cookie，且如果 Cookie 设置了特定 domain，单纯遍历 document.cookie 是拿不到 domain 信息的，可能删不干净。

追问

Secure Cookie 前端能操作吗？

HTTPS 环境下可以。Secure 属性只限制传输层面——Cookie 不会随 HTTP（非加密）请求发送，但 document.cookie 的读写是 JavaScript 层面的操作，与传输协议无关。在 HTTPS 页面上，JS 可以正常读取和删除带 Secure 的 Cookie。

SameSite 属性对删除有影响吗？

没有。SameSite 控制的是 Cookie 在跨站请求中是否发送（防 CSRF），不影响 JS 对 Cookie 的删除操作。删除时不需要指定 SameSite 属性。但需要注意：Chrome 80+ 将未设置 SameSite 的 Cookie 默认视为 Lax，这影响的是请求发送行为，与删除无关。

会话 Cookie（Session Cookie）怎么删除？

会话 Cookie 没有设置 expires 或 max-age，浏览器关闭后自动消失。但如果想在当前会话中主动删除它，方法一样——设置 max-age=0 或 expires 为过去时间即可。会话 Cookie 和持久化 Cookie 的删除方式没有区别。

删除 Cookie 时 value 要留空吗？

推荐留空但不强制。document.cookie = 'key=; max-age=0' 和 document.cookie = 'key=deleted; max-age=0' 都能删除。留空只是语义更清晰。真正触发删除的是 max-age=0 或过去的 expires，与 value 无关。