JavaScript - Cookie 属性

Cookie 属性

JavaScript Cookie 属性用于设置 Cookie 的附加信息，例如路径、域名、到期日期等。在 JavaScript 中，您可以在设置新 Cookie 或更新 Cookie 时指定 Cookie 属性。例如，您可以使用"expires"属性设置 Cookie 的到期日期。

简单来说，Cookie 属性用于控制 Cookie 的行为以及 Cookie 在浏览器中的使用方式。

下表列出了所有 Cookie 属性及其说明。

然而，最重要的是，属性是可选的。

此外，您无法操作 Cookie 的所有属性。浏览器会设置一些属性。

在浏览器中检查属性值

您可以将属性设置为 Cookie，但无法访问这些属性。要检查属性是否已设置，可以使用浏览器控制台。

按照以下步骤在浏览器控制台中检查 Cookie。

步骤 1 − 在浏览器中右键单击。它将打开菜单。您需要选择"检查"选项。它将打开开发者工具。

步骤 2 − 之后，您需要转到"应用程序/存储"选项卡。

步骤 3 − 在侧边栏中，选择"cookies"。

步骤 4 − 现在，点击任意 Cookie 以查看其名称、值和其他属性值。

以上步骤仅适用于 Chrome 浏览器。具体步骤可能因您使用的浏览器而异。

在这里，您将通过示例逐一了解每个属性。

Cookie 的 Name/Value 属性

Name 属性用于存储 Cookie 数据。它将数据作为值。如果您想在"Name"属性的值中使用特殊字符，则需要使用 encodeURIComponent() 方法对文本进行编码。

语法

请按照以下语法设置 Cookie 的 Name 属性。

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

在上述语法中，我们使用 encodeURIComponent() 方法对"cookieValue"进行了编码，并将编码后的值用作 name 属性值。

示例

在下面的代码中，我们将"subscribed"cookie 设置为"false"。您可以点击"读取 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 的过期日期。它接受日期字符串作为值。

如果您将 'expires' 的值设置为 0 或超过该日期，浏览器将自动删除该 Cookie。

语法

请按照以下语法设置 Cookie 中的 expires 属性。

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

在上述语法中，您需要将 'dateStr' 替换为日期字符串。

示例

在下面的代码中，我们设置了产品 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 的有效期。