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

1. 什么是 Cookie

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

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

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

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

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

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

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

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

document.cookie = "username=JohnDoe";

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

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

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

解釋：該 Cookie 會在 7 天后過期，且在整個(gè)網(wǎng)站的所有路徑上都有效。

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

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

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

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

3. 如何獲取 Cookie

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

獲取單個(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; // 如果沒有找到對應(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 的對象形式

4. 如何刪除 Cookie

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

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

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

解釋：通過將 Cookie 的過期時(shí)間設(shè)置為過去的日期，瀏覽器會刪除該 Cookie。

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

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

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

// 用戶登錄時(shí)設(shè)置 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.");
  }
}

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

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

示例 2：保存用戶語言偏好

通過 Cookie 保存用戶選擇的語言設(shè)置，在下次訪問時(shí)自動加載用戶的語言偏好。

// 設(shè)置語言 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"; // 默認(rèn)語言為英文
}

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

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

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

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

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

總結(jié)

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

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

最新評論