JavaScript中什么是Cookie_如何设置过期时间-js教程-PHP中文网

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

幻影之瞳

发布： 2025-12-18 20:25:25

原创

199人浏览过

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.com）
secure：仅通过 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），写法更简洁且不受本地时区影响：

塔可商城

塔可商城, 一个基于springboot+uniapp+vue3技术栈开发的开源跨平台小程序、管理后台，后端服务的项目，它内置提供了会员分销，区域代理，商品零售等功能的新零售电商系统。强大弹性的架构设计，简洁的代码，最新的技术栈，全方面适合不同需求的前端，后端，架构的同学，同时更是企业开发需求的不二选择。项目结构通过项目结构，你将清楚明白你即将入手的是一个怎么样的项目，你可能需要什么，如何

查看详情

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

登录后复制

⚠️ 注意：expires 和 max-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 或一个过去的时间
path 和 domain 必须与原 Cookie 完全一致，否则无法覆盖

注意事项和替代方案

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

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

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

以上就是JavaScript中什么是Cookie_如何设置过期时间的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

如何用javascript操作cookie_如何读取和设置？前端存储方案_javascript本地存储 JavaScript Fetch API怎么用_它和AJAX有何不同？ Nuxt 3 useFetch中正确传递客户端Cookie请求头的方法 Nuxt 3 useFetch 与 Cookie 头部：客户端请求的最佳实践