JavaScript - Cookie 屬性

你好，有志於網頁開發的夢想家們！今天，我們將踏上一段甜蜜的旅程，探索cookies的奇妙世界。不，不是指巧克力碎片餅乾（雖然我也希望是！），而是那些讓我們的網頁體驗更加順暢和個人化的數位cookies。所以，拿起你的虛擬牛奶，讓我們一起深入探讨JavaScript Cookie 屬性的美味話題！

Cookie 屬性

在深入細節之前，我們先來了解一下什麼是cookie屬性。把cookies想成是你的瀏覽器關於你的小筆記。Cookie屬性就像是這些筆記上的特殊指示，告訴瀏覽器如何處理它們。它們對於安全性、功能性和用戶體驗至關重要。

以下是我們將討論的主要cookie屬性的快速概覽：

屬性	描述
名稱/值	cookie的核心數據
路徑	指定哪些伺服器路徑可以訪問cookie
過期	設置cookie的過期日期
最大存活時間	定義cookie應該持續多久
域名	確定哪些域名可以使用cookie

在瀏覽器中檢查屬性值

在我們開始設置cookies之前，讓我們先學習如何檢查它們。打開你的瀏覽器開發者工具（通常是F12），進入應用或存儲標籤，尋找Cookies。就像偷窺饼干罐一樣！

// 設置一個簡單的cookie
document.cookie = "username=John Doe";

// 在控制台檢查它
console.log(document.cookie);

當你運行這段代碼並檢查你的控制台時，你會看到"username=John Doe"。設置和讀取基本的cookie就是這麼簡單！

Cookie的名稱/值屬性

名稱/值對是cookie的核心。它就像是一個鍵和它對應的寶藏。

// 設置一個帶有名稱和值的cookie
document.cookie = "favoriteColor=blue";

// 設置多個cookie
document.cookie = "favoriteAnimal=dog";
document.cookie = "favoriteNumber=42";

// 讀取cookies
console.log(document.cookie);

這會輸出你所有的cookies。記住，每次document.cookie的賦值都會添加一個新的cookie，而不是覆蓋現有的！

Cookie的路徑屬性

路徑屬性決定了你的網站上的哪些頁面可以訪問cookie。這就像告訴cookie它被允許進入你的網站房屋的哪些房間。

// 為特定路徑設置cookie
document.cookie = "user=Alice; path=/dashboard";

// 為整個網站設置cookie
document.cookie = "theme=dark; path=/";

在這個例子中，"user" cookie只有在"/dashboard"路徑及其子路徑中才能訪問，而"theme" cookie則在整個網站中都可以使用。

Cookie的過期屬性

過期屬性設置了一個特定的日期，當cookie應該被刪除時。這就像在牛奶上標上過期日期！

// 設置一個7天後過期的cookie
let expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7);
document.cookie = "subscription=premium; expires=" + expirationDate.toUTCString();

這個cookie將在7天後自我摧殘。任務不可能，cookies風格！

Cookie的最大存活時間屬性

最大存活時間屬性設置了cookie應該持續多少秒。這就像為你的cookie設置一個倒數計時器。

// 設置一個持續1小時的cookie
document.cookie = "session=active; max-age=3600";

// 設置一個立即刪除的cookie
document.cookie = "tempData=123; max-age=0";

第一個cookie將持續一小時，而第二個cookie就像一個自我摧殘的信息——它一被創建就消失了！

Cookie的域名屬性

域名屬性指定哪些域名可以訪問cookie。這就像決定哪些朋友可以分享你的秘密配方。

// 為當前域名及其所有子域名設置cookie
document.cookie = "language=en; domain=.example.com";

// 為精確域名設置cookie
document.cookie = "userId=12345; domain=shop.example.com";

在第一個例子中，cookie可以訪問example.com及其所有子域名（如blog.example.com）。第二個cookie則僅限於shop.example.com。

現在，讓我們將所有這些放在一起，形成一個更複雜的例子：

function setCookie(name, value, days, path, domain, secure) {
let expires = "";
if (days) {
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires +
(path ? "; path=" + path : "") +
(domain ? "; domain=" + domain : "") +
(secure ? "; secure" : "");
}

// 使用方法
setCookie("username", "JohnDoe", 7, "/", "example.com", true);

這個函數允許你設置我們討論過的所有屬性的cookie。它就像是一把瑞士軍刀，用於創建cookies！

記住，cookies是強大的工具，但隨著权力的增強，責任也越大。在使用cookies時，總是要關注用戶的隱私和安全性。

至於你們，夥伴們！現在你已經裝備好了處理JavaScript中cookies的知識。下次你在瀏覽網頁時，如果它記住了你的偏好設置，你就會知道背後的甜蜜秘密。快樂編程，願你的cookies永遠新鮮且安全！

Credits: Image by storyset