JavaScript 和 Cookies

您好，未来的 JavaScript 巫師們！今天，我們將要踏上一次美味的旅程，探索 cookies 的世界。不，不是你們泡牛奶的那种（雖然我現在也想要一個），而是讓我們的網頁體驗更加順暢和個性化的數位 cookies。所以，拿起你的虛擬圍裙，讓我們開始烘焙...我是說，編程！

Cookies 是什麼？

Cookies 是網站在用戶訪問時存儲在用戶電腦上的小數據塊。把它們想像成網站貼在你電腦上的小張數位便利貼，用以記住有關你的資訊。這些「便利貼」可以包含各種各樣的信息，比如你的偏好設定、登錄細節，或是購物車中的商品。

當我第一次聽說 cookies 時，我以為是微型計算機小精靈在塗鴉筆記並把它們塞進我的電腦。雖然實際情況並非如此，但這是一種不錯的視覺化概念！

为什麼需要 Cookies？

你可能會想，「為什麼網站不能沒有這些 cookies 這些東西就記住東西？」讓我給你講一個小故事。

想像你在一個繁忙的咖啡廳。你點了一杯咖啡和一個三明治，但然後你需要去洗手間。當你回來時，咖啡師怎麼知道在這片客人海中哪個訂單是你的？這就是數位世界中 cookies 來得及用的地方。

Cookies 有以下幾個原因需要：

1. 記住用戶偏好設定
2. 保持用戶登錄狀態
3. 追蹤購物車中的商品
4. 為用戶提供個性化體驗
5. 分析用戶行為以進行改進

沒有 cookies，每次你訪問一個網站，都會像第一次見面一樣 - 沒有記住你的偏好設定，沒有保存的登錄狀態，購物車中沒有商品。不是很方便，對吧？

它是如何工作的？

現在，讓我們探查一下這些數位 cookies 實際上是如何工作的。別擔心；這其實沒有聽起來那麼複雜！

當你訪問一個網站時，它可以發送一個 cookie 到你的瀏覽器。你的瀏覽器然後將這個 cookie 存儲在你的電腦上。下次你訪問同一個網站時，你的瀏覽器會將 cookie 從網站發送回來。這就像你的電腦和網站之間的一個秘密握手。

以下是一個簡單的示意圖，說明它是如何工作的：

用戶訪問網站
↓
網站發送 cookie
↓
瀏覽器存儲 cookie
↓
用戶重新訪問網站
↓
瀏覽器發送 cookie
↓
網站識別用戶

現在我們了解了基本知識，讓我們挽起袖子開始在 JavaScript 中使用 cookies！

設置/存儲 Cookies

設置一個 cookie 就像為稍後留下了一張筆記。在 JavaScript 中，我們使用 document.cookie 屬性來創建一個 cookie。以下是如何操作的：

document.cookie = "username=John Doe";

讓我們分解一下：

• document.cookie 是我們用來與 cookies 互動的屬性。
• "username=John Doe" 是實際的 cookie。它是一個鍵值對，其中 username 是鍵，John Doe 是值。

你也可以設置多個 cookies：

document.cookie = "username=John Doe";
document.cookie = "age=30";
document.cookie = "city=New York";

每個 document.cookie 語句都會創建一個新的 cookie。它不會覆蓋現有的 cookies。

讀取 Cookies

讀取 cookies 就像翻看你留給自己的筆記。以下是如何讀取 cookies：

let allCookies = document.cookie;
console.log(allCookies);

這會給你所有 cookies 的長字符串。但通常，你想要獲得特定的 cookie 值。以下是一個用於此的函數：

function getCookie(name) {
let cookieArr = document.cookie.split(";");

for(let i = 0; i < cookieArr.length; i++) {
let cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {
return decodeURIComponent(cookiePair[1]);
}
}

return null;
}

// 使用
let username = getCookie("username");
console.log(username); // 輸出：John Doe

這個函數拆分 cookie 字符串，循環遍歷每個 cookie，並在找到匹配時返回值。

設置 Cookies 的過期日期

Cookies 就像牛奶 - 如果放得太久，它們會變質。默認情況下，cookies 在瀏覽器會話結束時過期。但你可以設置一個特定的過期日期：

let expiryDate = new Date();
expiryDate.setMonth(expiryDate.getMonth() + 1);

document.cookie = "username=John Doe; expires=" + expiryDate.toUTCString();

這個 cookie 將在一個月後過期。expires 屬性告訴瀏覽器何時刪除 cookie。

刪除一個 Cookie

有時候，你需要扔掉一個 cookie。為了刪除一個 cookie，你將其過期日期設置為過去的一個日期：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

這將 cookie 的值設置為空並將其過期日期設置為過去，從而有效地刪除它。

更新 Cookies

更新一個 cookie 就像再次設置它一樣簡單，帶上新值：

document.cookie = "username=Jane Doe";

如果已經存在一個名為 "username" 的 cookie，這將更新其值。如果不存在，它將創建一個新的 cookie。

Cookie 方法表

以下是一個方便的表格，總結了我們學到的方

Credits: Image by storyset