什么是 Cookies 及如何使用 JavaScript 处理它们

? ? ? 不太… ??? 更好了！餅乾 ? 是網路上最受歡迎的表情符號之一，也是網路上最重要的技術之一。

讓我們來看看這是怎麼一回事，好嗎？

瀏覽器餅乾的基礎知識

瀏覽器餅乾被引入到網路上，是為了保留有關使用者的持久性資訊。最初的使用案例是檢查使用者是否已經訪問過 Netscape 的網站。

餅乾是具有名稱字段、值字段和其他可選屬性的字符串。值是字符串，您可以存儲任何您認為最適合您的應用程序的數據。Google Analytics 的 _ga 可能是最常見的餅乾之一，通常看起來像這樣：

• 名稱: _ga
• 值: GA1.3.210706468.1583989741
• 域: .example.com
• 路徑: /
• 過期時間 / 最大年齡: 2022-03-12T05:12:53.000Z

餅乾最多可以存儲 4096 個字節的數據（這包括名稱、值、域、到期日期以及您可以放入其中的其他內容）。您可以添加有限數量的餅乾到每個域中，這取決於您的瀏覽器。

如何創建Cookie

創建Cookie有兩種主要方式：

• 使用HTTP，您可以在HTTP響應標頭中發送Set-Cookie。根據您用於Web服務器的技術，您可以使用不同的工具和庫來管理Cookie標頭。這些工具應該創建大致如下的HTTP響應：

HTTP/2.0 200 OK
Content-type: text/html
Set-Cookie: alligator_name=barry
Set-Cookie: tasty_cookie=strawberry
... More http Content

您可以向您的Cookie添加信息，如到期日期，以及安全功能，例如Secure指令和HttpOnly標誌。

Set-Cookie: cookie_name=cookie_value; Expires=Wed, 17 Sep 2021 07:00:00 GMT; Secure; HttpOnly

HttpOnly標誌意味著Cookie不能被瀏覽器讀取或修改。Secure意味著Cookie只能通過HTTPS傳輸。這些對於保護您的應用程序非常重要。

• 使用Javascript來管理Cookie有點棘手。我們有一個界面document.cookie，它存儲我們的Cookie並可以重新分配。例如，在安裝了Google Analytics的網站上，並在開發者控制台中，我們可以這樣做：

console.log(document.cookie)
// 記錄類似 "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741" 的內容

// 這個等號的運作方式並不如您預期
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// 記錄 "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content" 
// 請注意，前一段程式碼附加了我們創建的新 cookie

// 一個 cookie 介面的粗略實現可能看起來像這樣:
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// 對於一個真實的更新，我們首先會檢查 cookie 是否存在
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';  

Cookie 的類型

會話 cookie

會話 cookie 通常指的是存在直到瀏覽器關閉的一種 cookie 類型。要設置會話 cookie，您只需要不指定任何過期日期。

例如，您可以將用戶名存儲在 cookie 中。有權訪問 cookie 的人將能夠訪問用戶的名稱。由於它在 cookie 中，我們不需要將其添加到我們的請求中。

持久性cookie

當用戶關閉瀏覽器時，持久性cookie不會被瀏覽器刪除。這些cookie有一個在您的伺服器中可以設定的到期日期。您可以將cookie設定為在一天或十年後到期。

第三方cookie

我們可以區分同一域中的cookie和來自第三方提供者的cookie。我們之前提到的Google Analytics的示例就是第三方cookie的一個示例。第三方cookie可用於跟踪用戶活動。要設置第三方cookie，您必須設置'；domain=thirdpartydomain.com'。

Cookie Max-Age vs Expire

Cookie通常是臨時的，因此您可能希望設定精確的到期日期。您有兩種策略：

• 使用Expires並設置固定的過期日期。日期使用HTTP日期格式：<day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT。例如，如果我們想要我們的 cookie 在 2020 年 9 月 17 日過期，我們可以這樣做：

const jacksBirthday = new Date(2020, 8, 17);
document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';

• 使用‘Max-Age’並不是每個瀏覽器都支持的。但這是最穩妥的解決方案。它強制 cookie 在客戶端接收後的一定時間（以秒為單位）過期：

// 一天後過期
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

? 就是這樣！希望您現在對使用 JavaScript 在客戶端使用 cookie 有了更好的理解。如果您有任何問題，請在 Twitter 上問我們。下次，我們將看到如何使用 cookie 和 Express.js 管理會話。