如何使用 JavaScript 操作 Cookie？

使用 JavaScript 操作 Cookie - 完整教程

在前端开发中，Cookie 是一种非常常见的客户端存储方式。JavaScript 提供了一些方法来操作 Cookie，包括设置、获取、删除 Cookie 等。本文将详细介绍如何使用 JavaScript 操作 Cookie，并结合实际项目代码进行讲解。

目录

1. 什么是 Cookie？
2. 如何使用 JavaScript 设置 Cookie
   • 设置 Cookie 的基本语法
   • 设置 Cookie 时的一些常见选项
3. 如何获取 Cookie
   • 获取单个 Cookie
   • 获取所有 Cookie
4. 如何删除 Cookie
5. 实际项目中的 Cookie 应用示例
   • 示例 1：实现记住用户登录状态
   • 示例 2：保存用户语言偏好
6. Cookie 的安全性和隐私注意事项

---

1. 什么是 Cookie？

Cookie 是存储在用户浏览器中的小块数据，通常用于在客户端保存用户信息。服务器可以通过 Cookie 在请求中读取这些数据。常见的用途包括保存用户登录状态、语言设置、主题偏好等。

• Cookie 是键值对 ，例如：username=JohnDoe
• Cookie 的生命周期：可以设置为会话级（浏览器关闭后失效）或持久性（设置过期时间）。

---

2. 如何使用 JavaScript 设置 Cookie

设置 Cookie 的基本语法

在 JavaScript 中，可以通过修改 document.cookie 属性来设置 Cookie。语法如下：

document.cookie = "key=value; expires=expiration_date; path=path; domain=domain; secure";

• key=value：表示 Cookie 的名称和值。
• expires：设置 Cookie 的过期时间，必须使用 UTC 格式的日期字符串。如果不设置，默认 Cookie 会在浏览器会话结束时失效。
• path：设置 Cookie 有效的路径（默认为当前路径）。
• domain：设置 Cookie 的有效域名。
• secure：如果设置此项，表示 Cookie 只能通过 HTTPS 发送。

示例：设置一个简单的 Cookie

document.cookie = "username=JohnDoe";

这个 Cookie 会在当前浏览器会话期间有效，直到浏览器关闭。

示例：设置带过期时间的 Cookie

const date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 设置 7 天后过期
const expires = "expires=" + date.toUTCString();
document.cookie = "username=JohnDoe; " + expires + "; path=/";

解释：该 Cookie 会在 7 天后过期，且在整个网站的所有路径上都有效。

---

设置 Cookie 时的一些常见选项

1. expires ：设置 Cookie 过期时间。可以使用 Date 对象来设置未来的过期时间。
2. path ：设置 Cookie 有效的路径，默认为当前路径。可以设置为 / 使其对整个网站有效。
3. domain ：指定 Cookie 适用的域。若设置该值为 example.com，则所有该域下的子域都能访问该 Cookie。
4. secure：表示 Cookie 只能在 HTTPS 协议下传输。
5. SameSite ：控制 Cookie 在跨站请求中的发送行为，可以设置为 Strict、Lax 或 None。

示例：设置带多选项的 Cookie

const date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 设置 7 天后过期
const expires = "expires=" + date.toUTCString();
document.cookie = "theme=dark; " + expires + "; path=/; secure; samesite=Strict";

---

3. 如何获取 Cookie

获取 Cookie 需要通过 document.cookie 读取，但是返回的是一个包含所有 Cookie 的字符串，格式是 key=value 的对，多个 Cookie 通过分号 ; 分隔。

获取单个 Cookie

function getCookie(name) {
  const nameEq = name + "=";
  const cookies = document.cookie.split("; ");
  for (let i = 0; i < cookies.length; i++) {
    if (cookies[i].startsWith(nameEq)) {
      return cookies[i].substring(nameEq.length);
    }
  }
  return null; // 如果没有找到对应的 Cookie，返回 null
}

// 使用示例
const username = getCookie("username");
console.log(username); // 输出 Cookie 中 "username" 的值

获取所有 Cookie

function getAllCookies() {
  const cookies = document.cookie.split("; ");
  const cookieObj = {};
  cookies.forEach(cookie => {
    const [key, value] = cookie.split("=");
    cookieObj[key] = value;
  });
  return cookieObj;
}

const allCookies = getAllCookies();
console.log(allCookies); // 输出所有 Cookie 的对象形式

---

4. 如何删除 Cookie

删除 Cookie 只需要将其过期时间设置为过去的时间即可。

function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
}

// 使用示例
deleteCookie("username");

解释：通过将 Cookie 的过期时间设置为过去的日期，浏览器会删除该 Cookie。

---

5. 实际项目中的 Cookie 应用示例

示例 1：实现记住用户登录状态

在许多网站中，会通过 Cookie 来记住用户的登录状态。通过保存用户的 sessionId 或者登录凭证在 Cookie 中，下次访问时可以自动识别用户是否已经登录。

// 用户登录时设置 Cookie
function setLoginCookie(username) {
  const date = new Date();
  date.setTime(date.getTime() + (30 * 60 * 1000)); // 30 分钟后过期
  const expires = "expires=" + date.toUTCString();
  document.cookie = `username=${username}; ${expires}; path=/`;
}

// 检查用户是否已登录
function checkLogin() {
  const username = getCookie("username");
  if (username) {
    console.log(`Welcome back, ${username}!`);
  } else {
    console.log("User not logged in.");
  }
}

// 登录时调用
setLoginCookie("JohnDoe");

// 检查登录状态
checkLogin();

---

示例 2：保存用户语言偏好

通过 Cookie 保存用户选择的语言设置，在下次访问时自动加载用户的语言偏好。

// 设置语言 Cookie
function setLanguagePreference(language) {
  const date = new Date();
  date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000)); // 1 年后过期
  const expires = "expires=" + date.toUTCString();
  document.cookie = `lang=${language}; ${expires}; path=/`;
}

// 获取用户语言偏好
function getLanguagePreference() {
  return getCookie("lang") || "en"; // 默认语言为英文
}

// 使用示例
setLanguagePreference("fr"); // 设置为法语
console.log(getLanguagePreference()); // 输出 "fr"

---

6. Cookie 的安全性和隐私注意事项

1. SameSite 属性 ：为了提高安全性，设置 SameSite 属性，防止跨站请求伪造（CSRF）攻击。可以设置为 Strict（仅允许同一站点的请求）或 Lax（限制部分跨站请求）。
2. Secure 属性 ：使用 Secure 属性可以确保 Cookie 仅通过 HTTPS 协议传输，防止中间人攻击。
3. 敏感信息的存储：避免在 Cookie 中存储敏感信息，如密码、信用卡号等。对于这些信息，建议使用更安全的存储方式，如服务器端会话。

---

总结

JavaScript 提供了强大的 Cookie 操作功能，可以在客户端存储和读取信息。通过设置、获取、删除 Cookie，您可以实现许多常见的功能，如用户登录状态、语言偏好等。在实际开发中，务必注意 Cookie 的安全性和隐私保护，避免滥用存储敏感数据。