javascript的Cookie是什么_如何读写和设置过期时间【教程】

11次阅读

cookie浏览器中的一小段字符串,非对象jsON;document.cookie 是伪属性,读写需手动拼接符合规范的字符串,须编码值、指定 path/expires/max-age 等参数,并自行解析读取、用过期时间删除。

javascript的Cookie是什么_如何读写和设置过期时间【教程】

Cookie 是浏览器里的一小段字符串,不是对象也不是 json

javaScript 的 document.cookie 是一个“伪属性”:读它返回一长串用分号分隔的键值对字符串,写它则必须按固定格式拼接字符串——它不提供原生的增删改查方法,也不自动处理 URL 编码或过期逻辑。

常见错误是直接写 document.cookie = "user=john",结果发现没生效,或者写入后立刻读不到,原因通常是:
– 值里含空格或特殊字符(如 =;,)未编码
– 没指定作用域path),导致只在当前路径下可见
– 没设 expiresmax-age,变成会话 Cookie(关浏览器就丢)

设置 Cookie 必须手动拼接字符串,且注意分号和空格

写 Cookie 的本质就是给 document.cookie 赋一个符合 Netscape Cookie 规范的字符串。关键参数包括:

  • key=value:value 必须用 encodeURIComponent() 编码(尤其中文、空格、符号)
  • expires=GMT 时间字符串:格式如 Wed, 21 Oct 2027 07:28:00 GMT,用 new date().toUTCString() 生成
  • max-age=秒数:比 expires 更可靠(不受客户端时间影响),优先级更高
  • path=/:建议显式设为 /,否则默认是当前 URL 路径,子路径才能读到
  • domain=example.com:跨子域共享时才需要(如 a.example.com 和 b.example.com)
  • SecureHttpOnly:JS 无法设置后者;Secure 表示只走 https 传输

示例:设置一个 7 天后过期、全站可读的用户 ID

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

const expires = new Date(); expires.setDate(expires.getDate() + 7); document.cookie = `uid=${encodeURIComponent('abc123')}; expires=${expires.toUTCString()}; path=/; domain=.example.com; Secure`;

读取 Cookie 需要自己解析字符串,不能直接用点号访问

document.cookie 返回的是类似 "a=1; b=2; c=hello%20world" 的字符串,没有内置方法提取某个 key。你得手动切分、解码、匹配:

  • document.cookie.split('; ') 切成数组(注意分号后有个空格)
  • 对每个项用 .split('=') 拆出 key 和 encoded value
  • decodeURIComponent() 解码 value(否则中文/空格显示为 %xx)
  • 记得 trim key,因为有些浏览器会在等号前加空格

简单工具函数:

function getCookie(key) {   const cookies = document.cookie.split('; ');   for (const cookie of cookies) {     const [k, v] = cookie.split('=');     if (k.trim() === key) return decodeURIComponent(v);   }   return null; } // 使用:getCookie('uid')

删除 Cookie 就是设一个已过期的同名 Cookie

没有 deleteCookie() 这种方法。正确做法是用相同的 keypathdomain,再配一个过去的时间:

  • 必须确保 pathdomain 与当初设置时完全一致,否则删不掉
  • expires=Thu, 01 Jan 1970 00:00:00 GMTmax-age=0 都可以
  • value 可以随便填(比如空字符串),但 key 和作用域必须对得上

示例:

document.cookie = `uid=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=.example.com; Secure`;

真正容易被忽略的是:如果当初没写 path=/,那删除时也得用当时那个 path(比如 path=/admin),否则这个 Cookie 依然存在,只是你看不见。

text=ZqhQzanResources