JavaScript - Cookie 属性
Cookie 属性
JavaScript 中的 cookie 属性用于设置有关 cookie 的额外信息，例如路径、域名、过期日期等。在 JavaScript 中，你可以在设置新 cookie 或更新 cookie 时指定 cookie 属性。例如，你可以使用 expires 属性设置 cookie 的过期日期。
简单来说，cookie 属性用于控制 cookie 的行为以及 cookie 在浏览器中的使用方式。
在这里，我们在下面的表格中列出了所有 cookie 属性及其描述。
| 属性 | 描述 | 默认值 |
|---|---|---|
| Name/Value | 用于在浏览器中存储 cookie。 | |
| Domain | 指定 cookie 有效的域名。 | 域名的网站。例如，example.com |
| Path | 设置 cookie 的目录或网页路径。 | / (整个域名) |
| Expires | 用于指定 cookie 应过期的时间和日期。 | 当前会话 |
| Max-Age | 用于指定 cookie 过期的时间限制。 | 当前会话 |
| Secure | 如果此字段包含 "secure" 字样，则 cookie 只能通过安全服务器检索。如果此字段为空，则没有此限制。 | false |
| HttpOnly | 防止通过 JavaScript 访问 cookie 以提高 cookie 的安全性。 | false |
| SameSite | 用于指定如何处理第三方 cookie。 | Lax |
| Priority | 定义 cookie 的优先级。 | 1000 |
| Site/Service | 获取 cookie 源站点的相关信息。 | |
| SourcePort | 获取 cookie 源端口。 | |
| StoragePartition | 定义用于存储 cookie 的存储分区。 | |
| Size | 表示 cookie 的大小。 | 大小取决于文本长度。 |
不过，上述所有属性都是可选的。
此外，你无法操作 cookie 的所有属性。浏览器会设置某些属性。
在浏览器中检查属性值
你可以为 cookie 设置属性，但无法访问这些属性。要检查属性是否已设置，可以使用浏览器控制台。
按照以下步骤在浏览器控制台中检查 cookie。
步骤 1 − 在浏览器中右键单击。它将打开菜单。你需要选择“检查”选项。这将打开开发者工具。
步骤 2 − 之后，你需要转到 Application/Storage 选项卡。
步骤 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 在网站的每个网页上均可访问。您可以在网站的 different web pages 上尝试获取 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 替换为秒数。
示例
在下面的代码中，我们将 maxAge 属性的值设置为相当于 10 天的总秒数。您可以为 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 设置了 'example.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:example.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 的过期时间。