如何在JavaScript中使用Cookie

您是否想過網站是如何記住您的登入資訊、購物車內容和其他偏好的？答案就是 cookie。本文將解釋 Cookie 的型別、在 JavaScript 中使用 Cookie、何時使用 Cookie 以及最佳實踐。

Cookie 通過在使用者裝置上儲存少量資訊，在增強網站使用者體驗方面發揮著重要作用。這些資訊可以幫助網站記住使用者的偏好和活動，使後續訪問更加個性化。

Cookie 就像網站在你訪問時留在電腦上的小紙條。這些筆記包含有關您訪問的小資訊，如使用者名稱、語言偏好或您新增到購物車的商品。它們就像是網站的有用記憶。當你訪問一個網站時，就像是在進行一次對話。你要告訴網站你的姓名、喜歡的語言和感興趣的內容。網站會將這些資訊寫入 cookie，並安全地儲存在你的裝置上。在網路開發世界中，JavaScript 幫助這些 cookie 正常工作。

Cookie 的型別

Cookie 有不同的型別，每種型別都有其獨特的作用，以提高您的瀏覽體驗。瞭解 Cookie 的型別有助於你理解網站如何記住你的偏好和操作。讓我們來看看兩種主要型別：

1. 會話 Cookie：當您訪問網站時，網站會給您一個會話 Cookie。這種 cookie 是您訪問該網站時的短期記憶。它們儲存在瀏覽器的記憶體中，關閉時會被刪除。它們的持續時間與您在網站上的會話時間相同。一旦您關閉瀏覽器，它們就會消失，就像您看完書後擦掉石板一樣。
2. 持久 Cookie：持久 Cookie 就像一本日記。它們會在更長的時間內記錄你的偏好和操作。當你訪問一個網站時，它可能會給你一個持久 Cookie，即使你離開後再返回，它也會一直跟著你。它們會記住你的偏好，確保網站能識別你，並根據你以前的訪問情況定製你的體驗。它們可以持續更長時間，由網站設定有效期。有些可以持續數年，有些則可能在幾天或幾周後失效。

何時使用 Cookie

Cookie 可用於不同的目的，但一般用於改善使用者體驗和提高網站效率。以下是何時使用 Cookie 的一些具體示例：

• 記住登入資訊：Cookie 可用於記住使用者的登入資訊，這樣使用者就不必在每次訪問網站時都輸入登入資訊。這對需要使用者經常登入的網站（如電子郵件和社交媒體網站）很有幫助。
• 個性化使用者體驗：Cookie 可用於跟蹤使用者的偏好，如語言和時區，並顯示與其興趣相關的內容。例如，新聞網站可能會使用 Cookie 跟蹤使用者最喜歡的主題，並顯示更多關於這些主題的文章。
• 跟蹤購物車內容：它可用於跟蹤使用者已新增到購物車中的物品。如果使用者離開網站後再返回，它可以讓使用者完成購物，而無需重新開始。
• 提高網站效能：Cookie 可用於快取資料，減少向伺服器發出請求的次數。它可以提高網站的載入速度，使網站的響應速度更快。
• 跟蹤使用者行為：它可以跟蹤使用者在不同網站上的瀏覽活動。這些資訊可用於各種目的，如定向廣告和網站分析。

屬性

Cookie 可以有多種屬性，用於控制 cookie 的使用方式和儲存時間。最常見的 cookie 屬性有：

• Name: cookie 的名稱。它是 cookie 的識別符號。
• Value: cookie 的值。它是儲存在 cookie 中的資料。
• Domain: cookie 所屬的域。這是設定 cookie 的網站。
• Path: Cookie 有效的域路徑。這是 cookie 可以在網站上使用的部分。
• Expires: cookie 的過期日期和時間。在此日期和時間之後，cookie 將從使用者電腦中刪除。
• Secure: cookie 是否只能通過安全連線傳送。只有當使用者通過 HTTPS 連線到網站時，cookie 才會被髮送。
• HttpOnly: 是否可以通過 JavaScript 訪問 cookie。它有助於保護 cookie 不被惡意網站訪問。

在 JavaScript 中使用 Cookie

在 JavaScript 中使用 Cookie 對於在客戶端儲存和管理資料至關重要。JavaScript 可以通過多種方式與 Cookie 配合使用。例如：

• 設定和建立 cookie
• 檢索 cookie 資料
• 刪除 cookie

設定和建立 Cookie

要設定或建立 cookie，我們需要向 document.cookie 屬性分配一個字串。該字串通常包含 cookie 名稱、其值和可選屬性，如到期日期、域和路徑。

設定 Cookie：

document.cookie = "username=ChisomKanu";

在這裡，我們設定了一個簡單的 “username” cookie，其值為 “ChisomKanu”。不過請注意，這個 Cookie 是會話 Cookie，即瀏覽器關閉後會被刪除。

設定持久 Cookie：

const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7);  // Cookie expires in 7 days
document.cookie = "username=ChisomKanu; expires=" + expirationDate.toUTCString();

我們通過指定過期日期來設定持久 Cookie。Cookie 將儲存七天，即使瀏覽器關閉後重新開啟也是如此。

建立 Cookie 函式：為了簡化 Cookie 建立過程並使其更易於重複使用，可以建立一個函式：

function setCookie(name, value, daysToExpire) {
const date = new Date();
date.setTime(date.getTime() + daysToExpire * 24 * 60 * 60 * 1000);
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + "; " + expires + "; path=/";
}
// Usage:
setCookie("username", "ChisomKanu", 7); // Cookie will expire in 7 days

setCookie 函式接收 cookie 的名稱、值和應持續的天數。它會計算到期日期，並相應地設定 cookie。

檢索 Cookie 資料

讓我們一步步分解獲取 cookie 資料的過程：

• 訪問 document.cookie ：首先，我們將訪問 document.cookie 屬性，該屬性包含當前文件的所有 cookie。
• 分割 Cookie 字串：然後使用 .split('; ') 方法將 document.cookie 字串拆分成單個鍵值對。該方法根據分號和空格來分割 cookie。
• 建立 Cookie 物件：我們建立一個 JavaScript 物件來儲存 cookie 資料。從 Cookie 字串中提取的每個鍵值對都會作為屬性新增到該物件中。
• 迴圈瀏覽 Cookie：我們遍歷鍵值對陣列，並使用 .split('=') 將每個鍵值對拆分為 cookie 名稱和值。
• 填充 Cookie 物件：我們以 cookie 名稱作為鍵，以其各自的值作為值，填充 cookie 物件。

讓我們通過一個程式碼示例將這些步驟付諸實施：

function getCookies() {
const cookies = document.cookie.split('; ');
const cookieData = {};
for (let cookie of cookies) {
const [name, value] = cookie.split('=');
cookieData[name] = decodeURIComponent(value);
}
return cookieData;
}
const cookies = getCookies();
console.log(cookies);

getCookies 函式使用 .split('; ') 將 cookie 字串分割成由單個 cookie 組成的陣列。我們初始化一個空物件 cookieData，用於儲存 cookie 的鍵值對。我們使用 for 迴圈遍歷陣列中的每個 cookie。我們使用 .split('=') 對每個 cookie 的名稱和值進行分割。我們還使用 decodeURIComponent 來解碼 cookie 值中的任何特殊字元。然後，我們以 cookie 名稱作為鍵，以解碼後的 cookie 值作為值，填充 cookieData 物件。最後，我們返回包含所有 cookie 資訊的 cookieData 物件。

將 cookie 資料檢索為 JavaScript 物件後，我們就可以使用各自的鍵訪問單個 cookie 值了。

讓我們用一個程式碼示例來說明使用檢索到的 cookie 資料的過程：

function customizeUserExperience(cookies) {
if (cookies.username) {
console.log(`Welcome back, ${cookies.username}!`);
} else {
console.log('Welcome to our website!');
}
if (cookies.language) {
console.log(`Displaying content in ${cookies.language}.`);
// Additional logic to set the website language accordingly
}
}
// Assuming cookies is the cookie object retrieved earlier
customizeUserExperience(cookies);

customizeUserExperience 函式將檢索到的 cookie 物件作為引數。它會檢查 username cookie 是否存在。如果存在，則記錄個性化歡迎資訊。如果不存在，則會記錄一條普通的歡迎資訊。它還會檢查語言 cookie 是否存在。如果存在，就會記錄一條顯示內容語言的資訊。

還可以新增更多邏輯，以設定網站語言或根據其他檢索到的 cookie 值定製使用者介面。

Cookie 刪除

Cookie 刪除是網路開發的一個重要方面，可讓開發人員有效管理使用者資料和隱私。在 JavaScript 中，刪除 Cookie 可以增強使用者隱私或刪除過時資訊。刪除 Cookie 時，它將從使用者的裝置中移除，瀏覽器將不再向伺服器傳送該 Cookie。Cookie 可以根據各種條件進行刪除，如使用者操作或不再需要某些資料時。

讓我們看看使用 JavaScript 刪除 cookie 的過程：

• 訪問 document.cookie： 首先，我們訪問 document.cookie 屬性來操作 cookie 資料。
• 將有效期設定為過去： 要刪除 cookie，我們要將其有效期設定為過去的某個日期。這樣瀏覽器就會刪除 cookie。
• 設定路徑（如需要）： 如果 cookie 最初設定了特定路徑，則刪除時應使用相同路徑，以保持一致性。

程式碼示例說明：

function deleteCookie(cookieName) {
document.cookie = `${cookieName}=; expires=Tue, 10 Oct 2023 00:00:00 UTC; path=/;`;
}

deleteCookie 函式將 cookie 名稱作為引數。然後，函式會修改 document.cookie 屬性，將指定 cookie 的有效期設定為過去的某個日期（2023 年 10 月 10 日）。path 屬性被設定為”/”，以確保無論 cookie 的初始路徑如何，都會被刪除。

刪除 cookie 時需要注意一些事項：

• 如果刪除用於身份驗證的 cookie，使用者將退出網站。
• 如果刪除用於個性化的 cookie，使用者的偏好設定將被重置。
• 如果刪除了網站的所有 cookie，使用者下次訪問網站時就必須重新登入並設定偏好。

如何使用 DevTools 檢查 Cookie

網路開發人員經常使用瀏覽器 DevTools 來檢查和分析網路應用程式的各個方面。作為網路開發的重要組成部分，Cookie 也可以使用 DevTools 進行檢查。它使開發人員能夠驗證 Cookie 是否按預期進行設定、讀取和刪除。

首先，開啟網路瀏覽器並導航到要檢查 Cookie 的網頁。進入網頁後，可使用以下方法之一開啟 DevTools：

• 右鍵單擊並檢查： 右鍵單擊頁面上的任何元素，然後從上下文選單中選擇 “檢查” 或 “檢查元素”。
• 鍵盤快捷鍵： 使用鍵盤快捷鍵Windows/Linux：Ctrl + Shift + I Mac：Command + Option + I 選單：開啟瀏覽器選單（通常由三個垂直圓點或線條表示），轉到 “更多工具”，然後選擇 “開發工具”。

• 導航至 “應用” 選項卡： 開啟 DevTools 後，導航至 “應用” 選項卡。該選項卡包含與應用資料相關的多個部分，包括 Cookie、本地儲存、會話儲存等。

要在 DevTools 中檢查 Cookie，請按照以下步驟操作：

• 檢視在 “應用” 選項卡中 Cookie，查詢左側邊欄中的 “Cookie”。點選它將顯示與當前網站相關的所有域。選擇一個域即可檢視其相關的 Cookie。

下圖顯示的是 google.com 的 cookies：

• Cookie 詳情：點選特定 cookie 檢視其詳情。這包括 cookie 名稱、值、域、路徑、過期時間和其他屬性。
• 過濾 Cookie：DevTools 允許您按域過濾 Cookie。這在處理有許多 cookie 的網站時非常有用。使用過濾選項可縮小列表範圍，並專注於特定的 Cookie。
• 刪除 Cookie：要刪除 cookie，請右鍵單擊列表中的 cookie 並選擇 “刪除 “或使用底部的 “刪除 “按鈕。此操作將從瀏覽器中刪除 cookie。

小結

總之，需要注意的是，並非所有 cookie 都是一樣的。有些 cookie 是網站正常執行所必需的，而另一些則用於跟蹤和廣告等不太重要的目的。不過，禁用 Cookie 可能會導致某些網站無法正常執行。Cookie 是改善使用者體驗的重要工具，但應謹慎使用。使用者在訪問網站時應瞭解自己接受的 Cookie 型別，並可選擇禁用 Cookie。此外，禁用 cookie 可能會導致某些網站無法正常執行。網站應制定簡潔明瞭的隱私政策，解釋 cookie 的使用。開發人員應採取措施保護 cookie 不被攻擊者竊取或修改。