js cookie设置过期时间|极客笔记

js cookie设置过期时间

1. 什么是 Cookie？

在开发 Web 应用程序时，我们经常需要保存一些用户信息或状态。Cookie 是一种用于存储在用户计算机上的小型文本文件，它允许我们在用户访问页面时存储和获取数据。通过使用 Cookie，我们可以实现用户认证、记住用户偏好设置等功能。

每当用户访问一个站点时，该站点可以通过向用户计算机上存储 Cookie 来跟踪用户状态的变化。当用户再次访问相同的站点时，浏览器会将相关的 Cookie 信息发送给服务器。这样，服务器就可以获取先前存储在 Cookie 中的数据，实现个性化的服务。

2. Cookie 的结构

Cookie 是一个键值对的集合，每个键值对称为一个 Cookie。它是以文本的形式存储在用户计算机上的。一个 Cookie 包含以下几个属性：

名称：每个 Cookie 都有一个名称来唯一标识它。
值：与 Cookie 相关联的数据。这可以是任何文本数据。
域：指定 Cookie 可被发送到哪个域。默认情况下，Cookie 只能发送到创建它的域。
路径：指定该 Cookie 可用于哪些路径。默认情况下，Cookie 只能用于创建它的路径及其子路径。
过期时间：Cookie 的过期时间，用于指定 Cookie 的有效期。过期后，浏览器会删除 Cookie。
安全标志：指示是否仅通过加密连接发送 Cookie。只有在 HTTPS 连接上，浏览器才会发送带有安全标志的 Cookie。

3. 设置 Cookie 过期时间

通过设置 Cookie 的过期时间，我们可以控制 Cookie 的有效期。当 Cookie 的过期时间到达时，浏览器会自动删除该 Cookie。

在 JavaScript 中，我们可以通过设置 document.cookie 属性来创建或修改 Cookie。通过在 Cookie 字符串中设置过期时间，我们可以设置 Cookie 的过期时间。

Cookie 字符串的格式为：cookieName=cookieValue; expires=expirationTime; path=path; domain=domain; secure。

expires：用于设置 Cookie 的过期时间。它的值是一个日期（字符串），表示 Cookie 的过期日期和时间。过期时间必须以 GMT 格式的字符串表示。格式如：expires=Wed, 31 Dec 2025 23:59:59 GMT。如果没有设置 expires 属性，那么该 Cookie 会成为一个会话 Cookie，它在浏览器关闭后会自动被删除。
path：指定该 Cookie 可用于哪些路径。默认情况下，Cookie 只能用于创建它的路径及其子路径。格式如：path=/mypath。
domain：指定 Cookie 可发送到哪个域。默认情况下，Cookie 只能发送到创建它的域。格式如：domain=example.com。
secure：指示是否仅通过加密连接发送 Cookie。只有在 HTTPS 连接上，浏览器才会发送带有安全标志的 Cookie。格式如：secure=true。

以下是一些示例代码，演示如何设置 Cookie 的过期时间：

// 设置 Cookie 过期时间为 10 天后
function setCookieExpirationTime(days) {
  const date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = "expires=" + date.toGMTString();
  document.cookie = "myCookie=test; " + expires;
}

4. 获取 Cookie 过期时间

在 JavaScript 中，我们可以通过解析 document.cookie 属性的值来获取 Cookie 的过期时间。我们需要先将 document.cookie 的值分解成一个个键值对，然后找到我们感兴趣的 Cookie，并解析出它的过期时间。

以下是一个示例函数，演示如何获取 Cookie 的过期时间：

// 获取指定名称的 Cookie 的过期时间
function getCookieExpirationTime(cookieName) {
  const cookies = document.cookie.split("; ");
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].split("=");
    if (cookie[0] === cookieName) {
      const expirationTime = cookie[1].match(/expires=([^;]+)/);
      if (expirationTime) {
        return new Date(expirationTime[1]);
      }
    }
  }
  return null;
}

总结

通过设置 Cookie 的过期时间，我们可以控制 Cookie 的有效期。Cookie 是一种简便的存储和传递数据的机制，在 Web 开发中广泛应用。通过 JavaScript，我们可以轻松地创建、修改和获取 Cookie，为用户提供个性化的服务。记住，Cookie 是存储在用户计算机上的文本文件，所以不要在 Cookie 中存储敏感信息。