HTML怎么用cookie_html cookie读写删除操作做法【面试必备】

HTML怎么用cookie_html cookie读写删除操作做法【面试必备】需要先看清适用场景和关键步骤，避免只记结论却忽略实际限制。

document.cookie读写不生效因它是伪接口：写入需指定路径、过期时间等，否则会话级失效或跨路径不可读；HttpOnly cookie无法JS读取；读取须正则匹配防分号干扰；删除需严格匹配path/domain并设过去时间。

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

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

1. 默认路径是当前页面完整路径（如 /user/profile），不是根路径 /，导致其他页面读不到
2. 没设 expires 或 max-age，cookie 就是会话级，关浏览器即丢
3. 如果服务端设置了 HttpOnly，JS 根本无法读取该 cookie，document.cookie 里压根不会出现
4. 写入时多个键值对必须分开赋值，不能一次写 "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 层只负责触发登录/登出，不碰敏感字段。