瀏覽器 Cookie，或 HTTP Cookie，是由微小數據片段組成的文字檔案。網站使用這些資訊來追蹤使用者的歷程，從而提供量身定制的功能並改善其瀏覽體驗。Cookie 最多可儲存 4096 位元組的數據。然而，根據瀏覽器的不同，我們在每個網域中能新增的 Cookie 數量是有限的。
對於任何網路使用者來說，基本了解 HTTP Cookie 都是至關重要的，無論您只是為了好玩而瀏覽，還是以此謀生。本指南將 詳細向您介紹 Cookie 及其各種類型。我們的重點是幫助您理解和使用 JavaScript Cookie.
我們開始吧！
先決條件
要學習本教學，您必須具備：
-
基本的 JavaScript 知識.
開始使用 JavaScript Cookie
使用 JavaScript Cookie 非常簡單。它允許您毫不費力地建立、編輯和讀取 Cookie。此外，我們可以使用 Document 物件的 cookie 屬性來操作和限制 Cookie 的屬性，例如名稱、值和長度等等。
Cookie 的類型
首先，讓我們來看看不同類型的 Cookie：
-
第一方 Cookie
每當使用者造訪網站時，就會建立並儲存這些 Cookie。它允許網站擁有者深入了解使用者的數據，並為他們提供更好的瀏覽體驗。
-
持久性 Cookie
對於這類 Cookie，發行者會指定一個過期日期。因此，它的使用時間要長得多。這意味著即使您關閉瀏覽器，Cookie 仍會保留在其中。此外，每次您造訪建立該 Cookie 的網站時，數據都會傳回給發行者。
-
工作階段 Cookie
這些 Cookie 只是暫時的，並在瀏覽器開啟時儲存在其記憶體中。當您關閉瀏覽器時，Cookie 就會從瀏覽器的歷程記錄中刪除，從而降低了安全風險。您不需要指定過期日期。
-
第三方 Cookie
第三方 Cookie 是由您目前未造訪的網站所建立的。大多數情況下，這些 Cookie 有助於追蹤點擊廣告的使用者，並將其與推薦他們的網域關聯起來。
建立 Cookie
我們可以使用兩種方法來建立 Cookie：
-
傳送 Set-Cookie 於 HTTP 回應標頭中。根據網頁伺服器所使用的技術，您可以使用工具和函式庫來管理 Cookie 標頭。Cookie 可以包含過期日期等資訊，以及安全指令和 HttpOnly 旗標等安全功能。
-
HttpOnly： 這表示瀏覽器無法讀取或修改 Cookie。
-
Secure： 這表示 Cookie 只能透過 HTTPS 傳送。
-
使用 JavaScript 的 document.cookie 屬性，我們可以建立、讀取和刪除 Cookie。
步驟 1 — 建立 Cookie
接下來，我們將示範建立 JavaScript Cookie 的過程。Cookie 以名稱-值對格式儲存：
|
1 |
document.cookie = "UserName = CloudSigma"; |
在上述 Cookie 中， UserName 是 Cookie 的名稱，而 CloudSigma 是儲存在其中的值。
Cookie 具有過期日期。預設情況下，它會在關閉瀏覽器時自動刪除。您也可以為 Cookie 新增過期日期：
|
1 2 3 |
document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC"; document.cookie = "UserName = CloudSigma"; |
預設情況下，Cookie 屬於目前頁面。然而，我們也可以藉助 path 參數來指定 Cookie：
|
1 2 |
document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/"; |
-
Cookie Max-Age 與 Cookie Expire
根據您的需求，您可以使用這兩種策略來設定 Cookie 的過期日期。兩者之間的區別在於 expires 設定了刪除 Cookie 的過期日期。相反地， max-Age 以秒為單位設定 Cookie 被刪除的時間。遺憾的是， max-age 並非所有瀏覽器都支援。
以下為設定 Cookie 的範例，使用 expires 以及 max-age:
Expires:
|
1 2 3 |
var d = new Date(); d.setTime(d.getTime() + 5*60*1000); // 以毫秒為單位 document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';'; |
Max-age :
|
1 |
document.cookie = 'foo=bar;path=/;max-age='+5*60+';'; |
步驟 2 — 讀取 Cookie
此 document.cookie 屬性會傳回一個字串。如果有兩個或多個 Cookie，我們使用分號（ ;）和空格來分隔它們。
我們使用 split() 方法從 Cookie 列表中提取單個 Cookie。此方法將列表分解為單個名稱和值對。完成後，您就可以搜尋要讀取的目標 Cookie：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
function setCookie(name, count, validityCheck) { var cookie = name + "=" + encodeURIComponent(value); if(typeof validityCheck === "number") { cookie += "; max-age=" + (validityCheck*24*60*60); document.cookie = cookie; } } function getCookie(name) { var cookieArr = document.cookie.split(";"); for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); if(name == cookiePair[0].trim()) { return decodeURIComponent(cookiePair[1]); } } return null; } function checkCookie() { var UserName = getCookie("UserName"); if(UserName != "") { alert("Welcome again, " + UserName); } else { firstName = prompt("Enter your UserName:"); if(UserName != "" && UserName != null) { setCookie("UserName", UserName, 30); } } } |
讓我們來了解我們在程式碼中建立的函數：
| 函數名稱 | 描述 |
| setCookie() | 建立 Cookie |
| getCookie() | 讀取 Cookie 的值 |
| checkCookie() | 驗證 UserName 是否已設定。 |
在下一步中，我們將學習如何更新 Cookie。
步驟 3 — 更新 Cookie
我們可以為 Cookie 屬性設定新值。在我們的範例中，讓我們將使用者的訂閱從月度方案更新為季度方案。
讓我們將 max-age 屬性（屬於 UserName Cookie）從 30 天更新為 180 天：
|
1 2 |
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60; |
步驟 4 — 刪除 Cookie
使用相同名稱重新定義 Cookie 將會刪除您想要清除的 Cookie。我們可以透過將 max-age 屬性設定為： 0:
|
1 |
document.cookie = "UserName=; max-age=0"; |
此外，如果 Cookie 具有指定的路徑，請透過指定該路徑來刪除它：
|
1 |
document.cookie = "Username = ExcellentDesign; Path = /"; |
結論
Cookie 對於網站的正常運作和功能至關重要。在這篇入門教學中，我們詳細討論了 Cookie 及其不同的類型。此外，我們還透過一個範例學習了如何使用 Cookie。既然您已經可以熟練地使用 JavaScript Cookie，請開始建立自訂的 Cookie，以學習和探索更多關於此主題的內容。
此外，您可以從我們的部落格中探索許多關於 JavaScript 和網頁開發的教學:
祝您編程愉快！
留言
目前尚無留言。成為第一個留言的人吧。