JavaScript - 刪除 Cookies
你好，未來的 JavaScript 巫師們！今天，我們將踏上一段甜蜜的旅程，進入 cookies 的世界。不，不是巧克力碎片那種（雖然我希望能是！），而是那些讓我們的網頁體驗更加順暢的數字 cookies。我們將學習如何使用 JavaScript 刪除這些小小的數據碎屑。所以，拿起你的虛擬刮刀，讓我們開始吧！
刪除 Cookies 的不同方法
在我們深入 cookie 刪除的細節之前，讓我們先了解為什麼我們可能想要這樣做。想像一下你正在為一家烘焙坊建立網站（繼續我們的 cookie 主題！）。你可能会使用 cookies 來記住用戶的最愛點心。但如果他們想要重新開始或清除偏好設置呢？這就是 cookie 刪除派上用場的地方！
在 JavaScript 中有許多方法可以刪除 cookies，我們將一一探討。將這些方法想像成同樣一道菜的不同食譜——它們都達到同一個目標，但使用的材料略有不同。
| 方法 | 描述 |
|---|---|
| 使用 'expires' 屬性 | 將 cookie 的過期日期設置到過去 |
| 使用 'max-age' 屬性 | 將 cookie 的最大壽命設置為 0 或負數值 |
| 明確從瀏覽器刪除 | 指示瀏覽器移除 cookie |
現在，讓我們捋起袖子，開始編寫代碼吧！
使用 'expires' 屬性刪除 Cookies
刪除 cookie 的方法之一是將其過期日期設置到過去。這就像告訴 cookie，「你的時間到了！」這是怎麼做到的：
function deleteCookie(name) {
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
}
// 使用方法
deleteCookie('favoriteFlavorPreference');讓我們分解一下：
- 我們創建一個名為
deleteCookie的函數，它接受我們想要刪除的 cookie 名稱。 - 在函數內部，我們將 cookie 的值設置為空字符串。
- 我們將
expires屬性設置到過去（1970年1月1日，即 Unix 紀元）。 -
path=/確保我們針對的是整個站點的正確 cookie。
當你調用 deleteCookie('favoriteFlavorPreference') 時，就像告訴瀏覽器，「那個巧克力碎片偏好？它現在已是古老歷史了！」
使用 'max-age' 屬性刪除 Cookies
告別我們的數字 cookies 的另一種方法是使用 max-age 屬性。這就像為 cookie 設置一個計時器，決定它應該存在多久。如果我們將它設置為 0 或負數，就像說，「時間到了，cookie！」
function deleteCookieWithMaxAge(name) {
document.cookie = name + '=; max-age=0; path=/;';
}
// 使用方法
deleteCookieWithMaxAge('shoppingCartItems');這裡發生了什麼：
- 我們創建一個名為
deleteCookieWithMaxAge的函數，它接受 cookie 名稱。 - 我們將 cookie 的值設置為空字符串。
- 我們將
max-age=0，告訴瀏覽器立即過期 cookie。 - 再次，
path=/確保我們針對的是正確的 cookie。
使用這種方法就像告訴你的購物車項目，「感謝你的服務，但現在是時候清空了！」
明確從瀏覽器刪除 Cookies
有时，你可能想要給用戶更多對 cookie 偏好的控制權。在這種情況下，你可以提供一個按鈕或界面，讓他們可以明確刪除 cookies。以下是如何實現這一點的範例：
function deleteAllCookies() {
const cookies = document.cookie.split(";");
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i];
const eqPos = cookie.indexOf("=");
const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;";
}
}
// 使用方法
<button onclick="deleteAllCookies()">清除所有 Cookies</button>讓我們分解這個 cookie 摧殘過程：
- 我們定義一個名為
deleteAllCookies的函數。 - 我們將
document.cookie字符串拆分成一個個單獨的 cookie。 - 我們循環遍歷每個 cookie：
- 提取 cookie 的名稱。
- 將每個 cookie 的過期日期設置到過去（我們可靠的1970年1月1日）。
- 我們提供一個按鈕，當點擊時，將觸發這個函數。
這種方法就像在你的烘焙坊網站上有一個「重置偏好」按鈕。它允許用戶重新開始，也許去探索他們未曾嘗試過的新口味！
記住，雖然刪除 cookies 可以很有用，但尊重用戶隱私並提供關於你正在使用哪些 cookies 以及為什麼使用的清晰信息是很重要的。始終遵循最佳實踐和法律要求，關於 cookie 的使用和刪除。
總結來說，在 JavaScript 中刪除 cookies 就像在烘焙後清理一樣。它讓一切保持整潔，並允許重新開始。無論你是使用 expires 屬性、max-age，還是給用戶直接控制權，你现在都有管理 web 應用程序中 cookies 的工具。
所以，下次有人要求你「刪除 cookies」時，你就會知道他們不是在要求你藏起半夜零食的證據。祝編程愉快，願你的數字 cookies 永遠和可食用的 cookies 一樣令人愉悅！
Credits: Image by storyset