JavaScript中什么是Cookie_如何设置过期时间

Cookie是浏览器端小型文本存储机制,用于保存登录状态等数据,随同源请求自动发送;其结构含键值对及expires、max-age、path等属性,JavaScript通过document.cookie设置,删除需覆盖过期值且路径域名严格匹配。

javascript中什么是cookie_如何设置过期时间

Cookie 是浏览器提供的一种小型文本存储机制,用于在客户端(用户浏览器)保存少量数据,比如登录状态、用户偏好等。它会随每次同源 HTTP 请求自动发送到服务器,是 Web 开发中实现“记住我”“购物车”等功能的基础。

Cookie 的基本结构

一个 Cookie 通常由键值对(如 username=john)和若干可选属性组成,常见属性包括:

expires:指定绝对过期时间(GMT 格式),例如 expires=Wed, 01 Jan 2025 00:00:00 GMT max-age:指定相对过期时间(单位:秒),例如 max-age=3600 表示 1 小时后过期 path:限制 Cookie 在哪些路径下有效(默认为当前路径) domain:指定可访问该 Cookie 的域名(如 .example.comsecure:仅通过 HTTPS 传输 HttpOnly:禁止 JavaScript 访问(提升安全性) SameSite:控制跨站请求是否携带 Cookie

用 JavaScript 设置 Cookie 并指定过期时间

原生设置 Cookie 使用 document.cookie,它是一个可读写的字符串接口。注意:它不支持直接传入对象,所有属性必须拼接在同一个字符串里。

例如,设置一个 7 天后过期的登录标识:

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

const date = new Date();date.setDate(date.getDate() + 7); // 7天后document.cookie = `login_token=abc123; expires=${date.toUTCString()}; path=/; secure; SameSite=Strict`;

更推荐使用 max-age(优先级高于 expires),写法更简洁且不受本地时区影响:

document.cookie = "theme=dark; max-age=604800; path=/";// 604800 秒 = 7 天

⚠️ 注意:expiresmax-age 只需设一个;若同时存在,max-age 优先。

删除 Cookie 的正确方式

没有直接“删除”的 API,而是通过覆盖一个已过期的 Cookie 来实现:

document.cookie = "login_token=; max-age=0; path=/";// 或document.cookie = "login_token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

关键点:

值设为空字符串 max-age=0 或一个过去的时间 pathdomain 必须与原 Cookie 完全一致,否则无法覆盖

注意事项和替代方案

Cookie 有大小限制(单个约 4KB,总数量有限),且每次请求都会携带,可能影响性能。现代开发中:

敏感信息(如 token)建议用 HttpOnly + Secure Cookie,避免 JS 访问 非敏感前端状态(如语言、主题)可用 localStoragesessionStorage 替代 需要服务端验证的状态,仍应以 Cookie(配合签名)或 Authorization Header 为主

基本上就这些。Cookie 不复杂但容易忽略细节,尤其过期时间和作用域匹配,写错就存不进或删不掉。

以上就是JavaScript中什么是Cookie_如何设置过期时间的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1543580.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 15:10:11
下一篇 2025年12月21日 15:10:27

相关推荐

发表回复

登录后才能评论
关注微信