HTML中Cookie的读写与删除方法【面试必备】

本文深入解析了HTML中JavaScript操作Cookie的核心陷阱与最佳实践，直击面试高频痛点：document.cookie并非普通属性而是“伪接口”，写入时若遗漏路径、过期时间或未正确编码，极易导致会话级失效、跨路径不可读或完全丢失；HttpOnly限制使部分Cookie对JS彻底不可见；读取需用正则精准匹配防分号干扰，删除则必须严格复现原始path/domain并设置过去时间覆盖——稍有偏差即删不干净。文章还提供了安全可靠的setCookie、getCookie、deleteCookie封装函数，并强调现代开发中应遵循最小权限原则，敏感数据交由HttpOnly+Secure Cookie保护，JS仅处理非敏感状态，兼顾安全性与实用性。

JavaScript 中 document.cookie 读写为什么总不生效

因为 document.cookie 不是普通属性，而是个“伪接口”：赋值时写入，读取时只返回当前域下所有未过期、未标记 HttpOnly 的 cookie 字符串（用分号+空格分隔），不自动解析。直接 document.cookie = "a=1" 看似简单，但漏掉路径、域名或过期时间，很可能写进去就消失，或者读不到。

• 默认路径是当前页面完整路径（如 /user/profile），不是根路径 /，导致其他页面读不到
• 没设 expires 或 max-age，cookie 就是会话级，关浏览器即丢
• 如果服务端设置了 HttpOnly，JS 根本无法读取该 cookie，document.cookie 里压根不会出现
• 写入时多个键值对必须分开赋值，不能一次写 "a=1; b=2" 期望同时生效

怎么安全地设置带路径和过期时间的 cookie

手动拼字符串容易出错，尤其日期格式和编码。推荐封装一个最小可用的写入函数：

function setCookie(name, value, options = {}) {
  const { expires = 7, path = '/', domain = '', secure = false } = options;
  let cookieStr = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
  cookieStr += `; path=${path}`;
  if (domain) cookieStr += `; domain=${domain}`;
  if (expires > 0) {
    const d = new Date();
    d.setTime(d.getTime() + expires * 24 * 60 * 60 * 1000);
    cookieStr += `; expires=${d.toUTCString()}`;
  }
  if (secure) cookieStr += '; secure';
  document.cookie = cookieStr;
}

注意：encodeURIComponent 必须加，否则值含空格、分号、等号会破坏 cookie 结构；expires 单位是天，转成 UTC 字符串才被浏览器正确识别。

怎么可靠地读取指定 name 的 cookie 值

document.cookie 返回的是原始字符串，比如 "uid=abc123; theme=dark; _ga=GA1.2.xxx"，不能靠 .split(';') 简单切——因为值本身可能含分号（虽少见）或空格。得用正则匹配边界：

function getCookie(name) {
  const match = document.cookie.match(new RegExp(`(^| )${encodeURIComponent(name)}=([^;]+)`));
  return match ? decodeURIComponent(match[2]) : null;
}

这个正则确保只匹配完整 key（前后是空格或开头/结尾），并解码值。如果 cookie 值是 JSON 字符串，需额外 JSON.parse()，但要注意 XSS 风险，别直接执行。

删除 cookie 实际上就是覆盖过期

没有原生 delete 操作。所谓“删除”，是用相同 name、path、domain 再写一次，但把 expires 设为过去的时间：

function deleteCookie(name, options = {}) {
  const { path = '/', domain = '' } = options;
  // 必须保证 path/domain 和写入时完全一致，否则删不掉
  document.cookie = `${encodeURIComponent(name)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}` +
    (domain ? `; domain=${domain}` : '');
}

最容易踩的坑是：写 cookie 时用了 path='/admin'，删的时候忘了传，用了默认 '/'，结果删的是根路径下的同名 cookie，原来那个还在。path 和 domain 必须严格一致。

现代项目更倾向用 localStorage 或服务端 session，cookie 仅用于身份凭证（如 sessionid），且优先走 HttpOnly + Secure，JS 层只负责触发登录/登出，不碰敏感字段。

理论要掌握，实操不能落！以上关于《HTML中Cookie的读写与删除方法【面试必备】》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！