前端 JavaScript 项目代码中怎么设置 Cookie 过期时间

在前端JavaScript项目代码中设置Cookie过期时间是一项常见且关键的操作。它涉及到用户身份验证、偏好设置保存、以及会话状态管理等多个方面。最直接的方式是通过JavaScript代码在客户端创建Cookie时，指定expires属性或使用max-age属性来定义Cookie的生命周期。其中，使用max-age属性是一种更现代且推荐的方式，因为它指定了从当前时间开始，直到Cookie过期所需的秒数。例如，如果想让Cookie在24小时后过期，可以将max-age设置为86400秒（24小时60分钟60秒）。

一、创建和设置COOKIE

首先，要在JavaScript中创建和设置Cookie，可以通过编写一个简单的函数来实现。这个函数将接受Cookie的名称、值以及过期时间作为参数。Cookie的值应该是经过编码的，以避免特殊字符导致的问题，可以使用encodeURIComponent函数来进行编码。以下是一个基本的示例：

function setCookie(name, value, seconds) {

  const expires = new Date(Date.now() + seconds * 1000);
  document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)};expires=${expires.toUTCString()}`;
}

这个函数首先计算Cookie的过期日期，然后将Cookie的名称、值以及过期时间组合成标准的Cookie字符串，并通过document.cookie属性进行设置。

接下来，具体展开讨论max-age属性的设置方法。与expires不同，max-age接受的是从当前时间开始，直到Cookie过期所需的秒数，而不是一个具体的过期日期。这提供了更大的灵活性和简便性，特别是在需要设置较短时间内Cookie过期的场景中。

二、使用MAX-AGE属性

使用max-age属性可以直接指定Cookie从创建开始直到过期所需的具体秒数。以下是如何在前面的setCookie函数中使用max-age的示例：

function setCookie(name, value, seconds) {

  document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)};max-age=${seconds}`;
}

在这个版本的函数中，省去了计算过期时间的步骤，而是直接在Cookie字符串中设置max-age属性。这种方式简化了代码，并使得过期时间的设置更直观、易于理解。

三、管理COOKIE的其它属性

在设置Cookie时，除了过期时间外，还有其他一些属性也非常重要，如Secure、HttpOnly和SameSite。

• Secure属性规定了Cookie仅可通过安全的HTTPS连接被发送到服务器。这是一个重要的安全措施，用于保护Cookie免受中间人攻击。

document.cookie = "username=JohnDoe; Secure";

• HttpOnly属性禁止JavaScript通过document.cookieAPI访问Cookie。这有助于防止跨站脚本攻击（XSS），从而保护存储在Cookie中的数据免受恶意脚本的访问。

document.cookie = "username=JohnDoe; HttpOnly";

• SameSite属性用于控制浏览器发送Cookie的条件，有助于防止跨站请求伪造攻击（CSRF）。它有三个值：Strict、Lax和None，分别提供不同级别的保护。

document.cookie = "username=JohnDoe; SameSite=Lax";

四、读取和删除COOKIE

读取Cookie相对简单，可以通过解析document.cookie字符串实现。而删除Cookie实际上是通过将过期时间设置为过去的某个时间来实现的。

读取Cookie

function getCookie(name) {

  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return decodeURIComponent(parts.pop().split(';').shift());
}

删除Cookie

function deleteCookie(name) {

  document.cookie = `${encodeURIComponent(name)}=; max-age=-1`;
}

设置Cookie在现代Web开发中起着重要作用，不仅关乎用户体验，也涉及安全性考虑。理解和利用好Cookie的过期时间及其他属性对于开发安全、可靠的Web应用至关重要。

相关问答FAQs：

如何在前端 JavaScript 项目中设置 Cookie 的过期时间？

1. 设置 Cookie 过期时间 – 要在前端 JavaScript 项目中设置 Cookie 的过期时间，可以使用document.cookie属性来操作 Cookie。要设置过期时间，可以将expires参数设置为一个 UTC 格式的字符串，如"expires=Sat, 31 Dec 2022 23:59:59 GMT"。

2. 使用日期函数设置过期时间 – 如果想要动态设置 Cookie 的过期时间，可以使用 JavaScript 的日期函数。先创建一个Date对象，然后使用日期函数来设置过期时间，最后将过期时间传递给expires参数。

   var currentDate = new Date();
   var expirationDate = new Date(currentDate.getTime() + 7 * 24 * 60 * 60 * 1000); // 设置为过期时间为一周后
   document.cookie = "cookieName=cookieValue; expires=" + expirationDate.toUTCString();
   

3. 设置过期时间的注意点 – 需要注意的是，设置的过期时间只是一个建议，浏览器可以选择是否遵循这个时间。此外，过期时间是相对于用户的本地时间而言的，而非服务器时间。

通过以上方法，你可以在前端 JavaScript 项目中设置 Cookie 的过期时间，从而实现更灵活和精确的控制。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。