如何在 JavaScript 中设置、读取和删除 Cookie？

JavaScript 操作 Cookie 主要靠 document.cookie。读取时它返回当前页面可访问的 Cookie 字符串；设置时一次只能写入一个 name=value，不会清空其他 Cookie；删除本质是把同名 Cookie 的过期时间设为过去。实际开发要注意两点：值要用 encodeURIComponent 编码，删除时 Path、Domain 要和设置时一致，否则看起来执行了，其实没删掉。HttpOnly Cookie 不能被 JavaScript 读取或设置，只能由服务端通过 Set-Cookie 下发。

追问

document.cookie = xxx 会覆盖所有 Cookie 吗？

不会。它只会新增或更新当前这一个 Cookie。读取 document.cookie 才会看到多个 Cookie 拼成的字符串。

为什么删除 Cookie 有时不生效？

大概率是 Path 或 Domain 不一致。比如设置时用了 Path=/app，删除时只写 Path=/，浏览器会认为它们不是同一个 Cookie。

为什么要编码 Cookie 值？

Cookie 值里如果有空格、分号、中文等特殊字符，可能导致解析错误。写入用 encodeURIComponent，读取用 decodeURIComponent。

JavaScript 能设置 HttpOnly 吗？

不能。HttpOnly 的目的就是禁止脚本访问 Cookie，必须由服务端设置。

写段代码

javascript
function setCookie(name, value, maxAge, path = '/') {
  document.cookie = `${name}=${encodeURIComponent(value)}; Max-Age=${maxAge}; Path=${path}`;
}
function getCookie(name) {
  return document.cookie.split('; ').find(v => v.startsWith(name + '='))
    ?.split('=').slice(1).join('=') || null;
}
function deleteCookie(name, path = '/') {
  document.cookie = `${name}=; Max-Age=0; Path=${path}`;
}