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 - 在浏览器中右键单击。将打开菜单。您需要选择“检查”选项。这将打开开发者工具。

步骤 2 - 然后，您需要转到“应用程序/存储”选项卡。

步骤 3 - 在侧边栏中，选择“Cookie”。

步骤 4 - 现在，单击任何 Cookie 以检查其名称、值和其他属性值。

以上步骤仅适用于 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 的过期时间。

打印页面