在前端開(kāi)發(fā)中，Cookie 是一種非常常見(jiàn)的客戶(hù)端存儲(chǔ)方式。JavaScript 提供了一些方法來(lái)操作 Cookie，包括設(shè)置、獲取、刪除 Cookie 等。本文將詳細(xì)介紹如何使用 JavaScript 操作 Cookie，并結(jié)合實(shí)際項(xiàng)目代碼進(jìn)行講解。

1. 什么是 Cookie

Cookie 是存儲(chǔ)在用戶(hù)瀏覽器中的小塊數(shù)據(jù)，通常用于在客戶(hù)端保存用戶(hù)信息。服務(wù)器可以通過(guò) Cookie 在請(qǐng)求中讀取這些數(shù)據(jù)。常見(jiàn)的用途包括保存用戶(hù)登錄狀態(tài)、語(yǔ)言設(shè)置、主題偏好等。

• Cookie 是鍵值對(duì)，例如：username=JohnDoe
• Cookie 的生命周期：可以設(shè)置為會(huì)話級(jí)（瀏覽器關(guān)閉后失效）或持久性（設(shè)置過(guò)期時(shí)間）。

2. 如何使用 JavaScript 設(shè)置 Cookie

設(shè)置 Cookie 的基本語(yǔ)法

在 JavaScript 中，可以通過(guò)修改 document.cookie 屬性來(lái)設(shè)置 Cookie。語(yǔ)法如下：

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

• key=value：表示 Cookie 的名稱(chēng)和值。
• expires：設(shè)置 Cookie 的過(guò)期時(shí)間，必須使用 UTC 格式的日期字符串。如果不設(shè)置，默認(rèn) Cookie 會(huì)在瀏覽器會(huì)話結(jié)束時(shí)失效。
• path：設(shè)置 Cookie 有效的路徑（默認(rèn)為當(dāng)前路徑）。
• domain：設(shè)置 Cookie 的有效域名。
• secure：如果設(shè)置此項(xiàng)，表示 Cookie 只能通過(guò) HTTPS 發(fā)送。

示例：設(shè)置一個(gè)簡(jiǎn)單的 Cookie

document.cookie = "username=JohnDoe";

這個(gè) Cookie 會(huì)在當(dāng)前瀏覽器會(huì)話期間有效，直到瀏覽器關(guān)閉。

示例：設(shè)置帶過(guò)期時(shí)間的 Cookie

const date = new Date();
date.setTime(date.getTime() + (7 * 24 * 60 * 60 * 1000)); // 設(shè)置 7 天后過(guò)期
const expires = "expires=" + date.toUTCString();
document.cookie = "username=JohnDoe; " + expires + "; path=/";

解釋?zhuān)涸?Cookie 會(huì)在 7 天后過(guò)期，且在整個(gè)網(wǎng)站的所有路徑上都有效。

設(shè)置 Cookie 時(shí)的一些常見(jiàn)選項(xiàng)

• expires：設(shè)置 Cookie 過(guò)期時(shí)間?？梢允褂?Date 對(duì)象來(lái)設(shè)置未來(lái)的過(guò)期時(shí)間。
• path：設(shè)置 Cookie 有效的路徑，默認(rèn)為當(dāng)前路徑。可以設(shè)置為 / 使其對(duì)整個(gè)網(wǎng)站有效。
• domain：指定 Cookie 適用的域。若設(shè)置該值為 example.com，則所有該域下的子域都能訪問(wèn)該 Cookie。
• secure：表示 Cookie 只能在 HTTPS 協(xié)議下傳輸。
• SameSite：控制 Cookie 在跨站請(qǐng)求中的發(fā)送行為，可以設(shè)置為 Strict、Lax 或 None。

示例：設(shè)置帶多選項(xiàng)的 Cookie

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

3. 如何獲取 Cookie

獲取 Cookie 需要通過(guò) document.cookie 讀取，但是返回的是一個(gè)包含所有 Cookie 的字符串，格式是 key=value 的對(duì)，多個(gè) Cookie 通過(guò)分號(hào) ; 分隔。

獲取單個(gè) 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; // 如果沒(méi)有找到對(duì)應(yīng)的 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 的對(duì)象形式

4. 如何刪除 Cookie

刪除 Cookie 只需要將其過(guò)期時(shí)間設(shè)置為過(guò)去的時(shí)間即可。

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

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

解釋?zhuān)和ㄟ^(guò)將 Cookie 的過(guò)期時(shí)間設(shè)置為過(guò)去的日期，瀏覽器會(huì)刪除該 Cookie。

5. 實(shí)際項(xiàng)目中的 Cookie 應(yīng)用示例

示例 1：實(shí)現(xiàn)記住用戶(hù)登錄狀態(tài)

在許多網(wǎng)站中，會(huì)通過(guò) Cookie 來(lái)記住用戶(hù)的登錄狀態(tài)。通過(guò)保存用戶(hù)的 sessionId 或者登錄憑證在 Cookie 中，下次訪問(wèn)時(shí)可以自動(dòng)識(shí)別用戶(hù)是否已經(jīng)登錄。

// 用戶(hù)登錄時(shí)設(shè)置 Cookie
function setLoginCookie(username) {
  const date = new Date();
  date.setTime(date.getTime() + (30 * 60 * 1000)); // 30 分鐘后過(guò)期
  const expires = "expires=" + date.toUTCString();
  document.cookie = `username=${username}; ${expires}; path=/`;
}

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

// 登錄時(shí)調(diào)用
setLoginCookie("JohnDoe");

// 檢查登錄狀態(tài)
checkLogin();

示例 2：保存用戶(hù)語(yǔ)言偏好

通過(guò) Cookie 保存用戶(hù)選擇的語(yǔ)言設(shè)置，在下次訪問(wèn)時(shí)自動(dòng)加載用戶(hù)的語(yǔ)言偏好。

// 設(shè)置語(yǔ)言 Cookie
function setLanguagePreference(language) {
  const date = new Date();
  date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000)); // 1 年后過(guò)期
  const expires = "expires=" + date.toUTCString();
  document.cookie = `lang=${language}; ${expires}; path=/`;
}

// 獲取用戶(hù)語(yǔ)言偏好
function getLanguagePreference() {
  return getCookie("lang") || "en"; // 默認(rèn)語(yǔ)言為英文
}

// 使用示例
setLanguagePreference("fr"); // 設(shè)置為法語(yǔ)
console.log(getLanguagePreference()); // 輸出 "fr"

6. Cookie 的安全性和隱私注意事項(xiàng)

SameSite 屬性：為了提高安全性，設(shè)置 SameSite 屬性，防止跨站請(qǐng)求偽造（CSRF）攻擊?？梢栽O(shè)置為 Strict（僅允許同一站點(diǎn)的請(qǐng)求）或 Lax（限制部分跨站請(qǐng)求）。

Secure 屬性：使用 Secure 屬性可以確保 Cookie 僅通過(guò) HTTPS 協(xié)議傳輸，防止中間人攻擊。

敏感信息的存儲(chǔ)：避免在 Cookie 中存儲(chǔ)敏感信息，如密碼、信用卡號(hào)等。對(duì)于這些信息，建議使用更安全的存儲(chǔ)方式，如服務(wù)器端會(huì)話。

總結(jié)

JavaScript 提供了強(qiáng)大的 Cookie 操作功能，可以在客戶(hù)端存儲(chǔ)和讀取信息。通過(guò)設(shè)置、獲取、刪除 Cookie，您可以實(shí)現(xiàn)許多常見(jiàn)的功能，如用戶(hù)登錄狀態(tài)、語(yǔ)言偏好等。在實(shí)際開(kāi)發(fā)中，務(wù)必注意 Cookie 的安全性和隱私保護(hù)，避免濫用存儲(chǔ)敏感數(shù)據(jù)。

以上就是JavaScript操作Cookie的示例詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript操作Cookie的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論