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

陆砚码

2026-09-15 • 👁 2人浏览过

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

简单切——因为值本身可能含分号（虽少见）或空格。得用正则匹配边界：立即学习 “ 前端免费学习笔记（深入） ”；使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载

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 层只负责触发登录/登出，不碰敏感字段。

相关文章