JavaScript - Cookie 屬性

上一頁
下一頁

Cookie 屬性

JavaScript Cookie 屬性用於設定有關 Cookie 的其他資訊，例如路徑、域、過期日期等。在 JavaScript 中，您可以在設定新 Cookie 或更新 Cookie 時指定 Cookie 屬性。例如，您可以使用“expires”屬性設定 Cookie 的過期日期。

簡單來說，Cookie 屬性用於控制 Cookie 的行為以及 Cookie 在瀏覽器中的使用方式。

以下表格列出了所有 Cookie 屬性及其說明。

屬性 描述 預設值
名稱/值 用於在瀏覽器中儲存 Cookie。
域 指定 Cookie 有效的域。 域的網站。例如，tutorialspoint.com
路徑 設定 Cookie 的目錄或網頁的路徑。 /（整個域）
過期 用於指定 Cookie 應過期的時間和日期。 當前會話
Max-Age 用於指定 Cookie 應過期的時間限制。 當前會話
安全 如果此欄位包含單詞“secure”，則 Cookie 只能透過安全伺服器檢索。如果此欄位為空，則不存在此類限制。 false
HttpOnly 防止透過 JavaScript 訪問 Cookie 以確保 Cookie 安全。 false
SameSite 用於指定如何處理第三方 Cookie。 Lax
優先順序 定義 Cookie 的優先順序。 1000
站點/服務 獲取有關 Cookie 的源站點的資訊。
源埠 獲取 Cookie 源的埠。
儲存分割槽 定義用於儲存 Cookie 的儲存分割槽。
大小 表示 Cookie 的大小。 大小取決於文字長度。

但是，以上所有屬性都是可選的。

此外，您無法操作 Cookie 的所有屬性。瀏覽器會設定一些屬性。

在瀏覽器中檢查屬性值

您可以將屬性設定為 Cookie，但無法訪問屬性。要檢查是否設定了屬性，您可以使用瀏覽器控制檯。

請按照以下步驟在瀏覽器控制檯中檢查 Cookie。

步驟 1 - 在瀏覽器中右鍵單擊。將開啟選單。您需要選擇“檢查”選項。這將開啟開發者工具。

Cookie Attributes Step 1

步驟 2 - 然後，您需要轉到“應用程式/儲存”選項卡。

Cookie Attributes Step 2

步驟 3 - 在側邊欄中，選擇“Cookie”。

Cookie Attributes Step 3

步驟 4 - 現在，單擊任何 Cookie 以檢查其名稱、值和其他屬性值。

Cookie Attributes Step 4

以上步驟僅適用於 Chrome 網路瀏覽器。根據您使用的瀏覽器，步驟可能會有所不同。

在這裡，您將逐一學習每個屬性並附帶示例。

Cookie 的名稱/值屬性

Name 屬性用於儲存 Cookie 資料。它將資料作為值。如果要在 'Name' 屬性的值中使用特殊字元，則需要使用 encodeURIComponent() 方法對文字進行編碼。

語法

請按照以下語法設定 Cookie 的 Name 屬性。

let value = encodeURIComponent(cookieValue);
document.cookie = "name=" + value + ";";

在上述語法中，我們使用 encodeURIComponent() 方法對 'cookieValue' 進行編碼，並將編碼後的值用作 name 屬性值。

示例

在以下程式碼中，我們設定了值為 'false' 的 'subscribed' Cookie。您可以點選讀取 Cookie 按鈕獲取 Cookie。

<html>
<body>
	<p id = "output"> </p>
	<button onclick = "setCookies()"> Set Cookie </button> <br> <br>
	<button onclick = "readCookies()"> Read Cookies </button>
	<script>
		let output = document.getElementById("output");
		function setCookies() {
			document.cookie = "subscribed=false"; // name-value pair
			output.innerHTML = "Cookie setting successful!";
		}
		function readCookies() {
			const allCookies = document.cookie.split("; ");
			output.innerHTML = "The subscribed cookie is - <br>";
			for (const cookie of allCookies) {
				const [name, value] = cookie.split("=");
				if (name == "subscribed") {
					output.innerHTML += `${name} : ${decodeURIComponent(value)} <br>`;
				}
			}
		}
	</script>
  </body>
</html>

Cookie 的 Path 屬性

Path 屬性用於設定 Cookie 的作用域。它定義了 Cookie 在網站上哪些位置可訪問。您可以設定相對路徑或絕對路徑作為 Path 屬性值。

如果設定相對路徑，則所有 Cookie 都可以在特定目錄或子目錄中的任何位置訪問。

語法

請按照以下語法設定 Cookie 中的 Path 屬性。

document.cookie = "name=value;path=pathStr";

在上述語法中，您需要將 'pathStr' 替換為實際的路徑字串。

示例

在以下程式碼中，我們設定了 Cookie 的路徑。這裡，我們設定了 ‘/’（首頁路由）。因此，Cookie 可以訪問網站的每個網頁。您可以嘗試在網站的不同網頁上獲取 Cookie。

<html>
<body>
	<button onclick = "setCookies()"> Set Cookie </button>
	<p id = "output"> </p>
	<button onclick = "readCookies()"> Read Cookies </button>
	<script>
		let output = document.getElementById("output");
		function setCookies() {
			document.cookie = "signIn=true; path=/";
			output.innerHTML = "Cookie set successful!"; 
		}
		function readCookies() {
			const allCookies = document.cookie.split("; ");
			output.innerHTML = "The cookie is : <br>";
			for (const cookie of allCookies) {
				const [key, value] = cookie.split("=");
				if (key == "signIn") {
					output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
				}
			}
		}
	</script>
</body>
</html>

Cookie Expires 屬性

“expires” 屬性用於設定 Cookie 的過期日期。它以日期字串作為值。

如果將 0 或過去的日期作為 'expires' 的值，瀏覽器將自動刪除 Cookie。

語法

請按照以下語法設定 Cookie 中的 expires 屬性。

document.cookie = "name=value;expires=dateStr";

在上述語法中，您需要將 'dateStr' 替換為日期字串。

示例

在下面的程式碼中，我們設定了 product Cookie。此外，我們還將過期日期設定為 2050 年。

您可以嘗試設定過去的過期日期並嘗試訪問 Cookie。您將無法找到該 Cookie。

<html>
<body>
	<p id = "output"> </p>
	<button onclick = "setCookies()"> Set Cookie </button> <br> <br>
	<button onclick = "readCookies()"> Read Cookies </button>
	<script>
		let output = document.getElementById("output");
		function setCookies() {
			document.cookie = "product=mobile;expires=12 Jan 2050 12:00:00 UTC";
			output.innerHTML = "Cookie Set Successful!";
		}
		function readCookies() {
			const allCookies = document.cookie.split("; ");
			output.innerHTML = "The cookie is : <br>";
			for (const cookie of allCookies) {
				const [key, value] = cookie.split("=");
				if (key == "product") {
					output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
				}
			}
		}
	</script>
</body>
</html>

Cookie 的 maxAge 屬性

“maxAge” 屬性是 “expires” 屬性的替代方案。它用於指定 Cookie 的生命週期。它以秒為單位作為值。

當 Cookie 的生命週期結束時，它將自動被刪除。

語法

請按照以下語法將 'maxAge' 屬性傳遞給 Cookie。

document.cookie = "name=value;max-ge=age;";

在上述語法中，您需要將 'age' 替換為秒數。

示例

在以下程式碼中，我們將總秒數設定為 10 天，作為 maxAge 屬性的值。您可以將 Cookie 的生命週期設定為 1 秒，並在 1 秒後嘗試訪問該 Cookie。

<html>
<body>
	<button onclick = "setCookies()"> Set Cookie </button>
	<button onclick = "readCookies()"> Read Cookies </button>
	<p id = "output"> </p>
	<script>
		const output = document.getElementById("output");
		function setCookies() {
			document.cookie = "token=1234wfijdn;max-age=864000";
		}
		function readCookies() {
			const allCookies = document.cookie.split("; ");
			output.innerHTML = "The cookie is : <br>";
			for (const cookie of allCookies) {
				const [key, value] = cookie.split("=");
				if (key == "token") {
					output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
				}
			}
		}
	</script>
</body>
</html>

Cookie Domain 屬性

domain 屬性用於指定 Cookie 有效的域名。預設值為發出請求的域名。您可以設定 domain 屬性以設定子域名。

語法

請按照以下語法設定 Cookie 中 domain 屬性的值。

document.cookie = "name=value;domain:domain_name ";

在上述語法中，將 'domain_name' 替換為實際域名，例如 example.com。

示例

在以下程式碼中，我們為 Cookie 設定了 'tutorialspoint.com' 域名。

<html>
<body>
	<p id = "output"> </p>
	<button onclick = "setCookies()"> Set Cookie </button>
	<button onclick = "readCookies()"> Read Cookies </button>
	<script>
		const output = document.getElementById("output");
		function setCookies() {
			document.cookie = "username=abcd;domain:tutorialspoint.com";
		}
		function readCookies() {
			const allCookies = document.cookie.split("; ");
			output.innerHTML = "The cookie is : <br>";
			for (const cookie of allCookies) {
				const [key, value] = cookie.split("=");
				if (key == "username") {
					output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
				}
			}
		}
	</script>
</body>
</html>

類似地，您還可以更新屬性值。例如，您可以延長 Cookie 的過期時間。

列印頁面
上一篇
下一篇
廣告