javascript的Cookie如何操作?【教程】

10次阅读

javaScript 无内置 cookie API,需手动操作 document.cookie 字符串,必须正确编码值、设置 path=/、Secure、expires 等属性,读取需正则解析,删除须完全匹配原 path/domain 并设过期时间。

javascript的Cookie如何操作?【教程】

javascript 本身没有内置的 Cookie 类或高级 API,所有操作都依赖原生的 document.cookie 字符串读写,这意味着你得自己解析、编码、设置过期时间、作用域等——稍不注意就会漏掉 pathdomainSecure 标志,导致 Cookie 写不进、读不到、或被浏览器拒绝。

如何安全地设置一个带属性的 Cookie

直接拼接字符串极易出错,比如忘记 encodeURIComponent() 导致特殊字符(如空格、分号)截断值,或漏写 path=/ 导致子路径下无法读取。

  • 必须对 value 使用 encodeURIComponent(),否则 =;、空格等会破坏格式
  • path=/ 是最常用且推荐的默认值,否则默认为当前路径(比如 /user/profile 下设的 Cookie 在 / 下就读不到)
  • 如果站点启用了 https,务必加上 Secure;若需跨子域共享(如 a.example.comb.example.com),才加 Domain=.example.com
  • 有效期用 expires(UTC 时间字符串)比 max-age 兼容性更好(IE 不支持 max-age
function setCookie(name, value, days = 7) {   const date = new Date();   date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);   const expires = date.toUTCString();   document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; expires=${expires}; path=/; Secure; SameSite=Lax`; }

为什么 document.cookie 读出来是字符串而不是对象

因为 document.cookie 是一个“getter/setter”伪属性:读取时返回一个分号分隔的键值对字符串(如 "a=1; b=2; c=hello%20world"),不自动解析,也不暴露原始属性(expiresHttpOnly 等均不可见)。

  • HttpOnly Cookie 完全不可读——js 访问 document.cookie 时会被静默过滤掉,这是安全机制,不是 bug
  • 多个同名 Cookie(不同 pathdomain)会同时出现在字符串中,但浏览器只返回**当前路径匹配且未过期**的那一条(按写入顺序?实际由浏览器决定,不可依赖)
  • 不能通过 document.cookie = "a=" 删除 Cookie,必须设 expires 为过去时间

如何可靠地读取指定 Cookie 的值

手动解析 document.cookie 字符串是最轻量、无依赖的做法,但要注意边界匹配(避免 name= 匹配到 namename=)和解码。

立即学习Java免费学习笔记(深入)”;

function getCookie(name) {   const match = document.cookie.match(new RegExp(`(^|;)\s*${encodeURIComponent(name)}=([^;]*)`));   return match ? decodeURIComponent(match[2]) : null; }
  • 正则中 (^|;) 确保匹配键的开头(行首或分号后),\s* 吃掉可能的空格
  • 即使服务端写了 SameSite=None; Secure,JS 仍能读——只要没标 HttpOnly
  • 不要用 split(';') + indexOf,遇到值含分号(虽少见但合法)就崩

删除 Cookie 的正确姿势是什么

没有 deleteCookie() 方法。删除 = 覆盖写入一个已过期的同名 Cookie,且 pathdomain 必须与原 Cookie 完全一致,否则旧 Cookie 仍残留。

  • 只设 expires 不够,必须带上和当初设置时一模一样的 path(常见坑:当初没写 path,默认是当前路径,删时却写了 path=/ → 删不掉)
  • 如果原 Cookie 有 Domain=.example.com,删除时也必须带上,否则只清除了当前主机名下的副本
  • 可以省略 value,但最好设为空字符串,更明确
function deleteCookie(name, path = '/', domain = '') {   document.cookie = `${encodeURIComponent(name)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}${domain ? '; domain=' + domain : ''}`; }

真正麻烦的从来不是语法,而是每个属性都得对齐、每个字符都要编码、每次读写都得防注入——这也是为什么现代项目基本用 localStorage 或服务端 session + JWT 替代 Cookie 做前端状态管理。如果非用 Cookie,建议封装成小函数并统一管理 pathSecure 策略,别在业务代码里零散拼字符串。

text=ZqhQzanResources