Cookie 的使用

可用

5.1 Cookie 的基本属性

Cookie 是网站可以在客户端(用户浏览器)保存的小数据片段。它们比 localStorage 出现早 20 年,一直以来帮助实现类似的功能。即便是现在,它们仍常用于保存会话状态、用户偏好、跟踪以及其他任务的信息。

Cookie 的基本属性:

  1. 名字和值 (name=value): 保存数据的键值对。
  2. 域名和路径 (domain, path): 决定 Cookie 适用于哪些 URL 和域名。
  3. 生命周期 (expires, max-age): 决定 Cookie 何时过期并删除。
  4. 安全性 (secure, HttpOnly): 指定 Cookie 何时及如何传输。

设置 Cookie

Cookie 可以通过 JavaScript 或服务端代码设置。在 JavaScript 中,使用 document.cookie 属性来设置。

使用 JavaScript 设置 Cookie 的示例:

JavaScript
document.cookie = "username=JohnDoe";

Cookie 的附加参数:

  • expires: 指定 Cookie 的过期日期。在此日期之后,Cookie 将被删除。
  • path: 决定 Cookie 有效的路径。通常使用 /,让 Cookie 可用于整个网站。
  • domain: 决定 Cookie 有效的域名。
  • secure: 如果设置了,Cookie 只会通过 HTTPS 传输。
  • HttpOnly: 如果设置了,Cookie 不能通过 JavaScript 访问(仅服务器端)。

设置带有附加参数的 Cookie 的示例:

JavaScript
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

5.2 Cookie 管理

1. 读取 Cookie

当前文档的所有 Cookie 都储存在 一个长字符串 中,即 document.cookie。要获取 Cookie 的值,需要解析这个字符串。

读取 Cookie 的示例:

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

// 获取 Cookie 的 "username" 值
const username = getCookie('username');
console.log(username); // 输出: JohnDoe

2. 更新 Cookie

要更新 Cookie 的值,只需使用相同的名称并使用新值和参数重新设置。

更新 Cookie 的示例:

JavaScript
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

3. 删除 Cookie

要删除 Cookie,需要为它设定一个 已过期的有效期

删除 Cookie 的示例:

JavaScript
// 设置过期时间
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

5.3 Cookie 用法示例

说明:

  • setCookie: 设置具备指定名称、值和生命周期(以天为单位)的 Cookie
  • getCookie: 返回指定名称的 Cookie 值
  • deleteCookie: 删除指定名称的 Cookie

示例:

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Cookie Example</title>
  </head>
  <body>
    <button onclick="handleSetCookie()">Set Cookie</button>
    <button onclick="handleGetCookie()">Get Cookie</button>
    <button onclick="handleDeleteCookie()">Delete Cookie</button>

    <script>
      function setCookie(name, value, days) {
        let expires = "";
        if (days) {
          const date = new Date();
          date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
          expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
      }

      function getCookie(name) {
        const nameEQ = name + "=";
        const ca = document.cookie.split(';');
        for (let i = 0; i < ca.length; i++) {
          let c = ca[i].trim();
          if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
      }

      function deleteCookie(name) {
        document.cookie = name + '=; Max-Age=0; path=/';
      }

      function handleSetCookie() {
        setCookie('username', 'JohnDoe', 7);
        alert('Cookie "username" 被赋值为 "JohnDoe",有效期为 7 天');
      }

      function handleGetCookie() {
        const cookieValue = getCookie('username');
        if (cookieValue) {
          alert('Cookie "username" 的值为: ' + cookieValue);
        } else {
          alert('未找到 Cookie "username"');
        }
      }

      function handleDeleteCookie() {
        deleteCookie('username');
        alert('Cookie "username" 已删除');
      }
    </script>
  </body>
</html>

5.4 服务器端设置 Cookie

来看一下如何在服务器(Node.js)上使用 HttpOnly 和 Secure Cookie。

示例:

JavaScript
const express = require('express');
const app = express();

app.get('/setcookie', (req, res) => {
  res.cookie('secureServerCookie', 'ServerJohnDoe', {
    maxAge: 7 * 24 * 60 * 60 * 1000, // 7 天
    httpOnly: true,
    secure: true,
    sameSite: 'strict'
  });
  res.send('已设置安全服务器 Cookie');
});

app.get('/getcookie', (req, res) => {
  const cookie = req.cookies.secureServerCookie;
  res.send(`Cookie 值: ${cookie}`);
});

app.listen(3000, () => {
  console.log('服务器运行于端口 3000');
});

Cookie 的使用例子:

  1. 认证: Cookie 经常用于存储会话令牌,以在请求间验证用户身份。
  2. 用户偏好: Cookie 可以存储用户设置,如界面语言或主题。
  3. 用户追踪: Cookie 可以用于追踪用户在网站上的行为,以便分析和内容个性化。
1
任务
Frontend SELF ZH,  第 46 级课程 0
已锁定
Cookie:用户名
Cookie:用户名
1
任务
Frontend SELF ZH,  第 46 级课程 0
已锁定
删除Cookie
删除Cookie
评论
  • 受欢迎
你必须先登录才能发表评论
此页面还没有任何评论