5.1 Cookie 的基本属性
Cookie 是网站可以在客户端（用户浏览器）保存的小数据片段。它们比 localStorage 出现早 20 年，一直以来帮助实现类似的功能。即便是现在，它们仍常用于保存会话状态、用户偏好、跟踪以及其他任务的信息。
Cookie 的基本属性：
- 名字和值 (name=value): 保存数据的键值对。
- 域名和路径 (domain, path): 决定 Cookie 适用于哪些 URL 和域名。
- 生命周期 (expires, max-age): 决定 Cookie 何时过期并删除。
- 安全性 (secure, HttpOnly): 指定 Cookie 何时及如何传输。
设置 Cookie
Cookie 可以通过 JavaScript 或服务端代码设置。在 JavaScript 中，使用 document.cookie 属性来设置。
使用 JavaScript 设置 Cookie 的示例：
JavaScript
document.cookie = "username=JohnDoe";
Cookie 的附加参数：
- expires: 指定 Cookie 的过期日期。在此日期之后，Cookie 将被删除。
- path: 决定 Cookie 有效的路径。通常使用 /，让 Cookie 可用于整个网站。
- domain: 决定 Cookie 有效的域名。
- secure: 如果设置了，Cookie 只会通过 HTTPS 传输。
- HttpOnly: 如果设置了，Cookie 不能通过 JavaScript 访问（仅服务器端）。
设置带有附加参数的 Cookie 的示例：
JavaScript
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
5.2 Cookie 管理
1. 读取 Cookie
当前文档的所有 Cookie 都储存在 一个长字符串 中，即 document.cookie。要获取 Cookie 的值，需要解析这个字符串。
读取 Cookie 的示例：
JavaScript
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
// 获取 Cookie 的 "username" 值
const username = getCookie('username');
console.log(username); // 输出: JohnDoe
2. 更新 Cookie
要更新 Cookie 的值，只需使用相同的名称并使用新值和参数重新设置。
更新 Cookie 的示例：
JavaScript
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
3. 删除 Cookie
要删除 Cookie，需要为它设定一个 已过期的有效期。
删除 Cookie 的示例：
JavaScript
// 设置过期时间
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
5.3 Cookie 用法示例
说明：
setCookie: 设置具备指定名称、值和生命周期（以天为单位）的 CookiegetCookie: 返回指定名称的 Cookie 值deleteCookie: 删除指定名称的 Cookie
示例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cookie Example</title>
</head>
<body>
<button onclick="handleSetCookie()">Set Cookie</button>
<button onclick="handleGetCookie()">Get Cookie</button>
<button onclick="handleDeleteCookie()">Delete Cookie</button>
<script>
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i].trim();
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function deleteCookie(name) {
document.cookie = name + '=; Max-Age=0; path=/';
}
function handleSetCookie() {
setCookie('username', 'JohnDoe', 7);
alert('Cookie "username" 被赋值为 "JohnDoe"，有效期为 7 天');
}
function handleGetCookie() {
const cookieValue = getCookie('username');
if (cookieValue) {
alert('Cookie "username" 的值为: ' + cookieValue);
} else {
alert('未找到 Cookie "username"');
}
}
function handleDeleteCookie() {
deleteCookie('username');
alert('Cookie "username" 已删除');
}
</script>
</body>
</html>
5.4 服务器端设置 Cookie
来看一下如何在服务器（Node.js）上使用 HttpOnly 和 Secure Cookie。
示例：
JavaScript
const express = require('express');
const app = express();
app.get('/setcookie', (req, res) => {
res.cookie('secureServerCookie', 'ServerJohnDoe', {
maxAge: 7 * 24 * 60 * 60 * 1000, // 7 天
httpOnly: true,
secure: true,
sameSite: 'strict'
});
res.send('已设置安全服务器 Cookie');
});
app.get('/getcookie', (req, res) => {
const cookie = req.cookies.secureServerCookie;
res.send(`Cookie 值: ${cookie}`);
});
app.listen(3000, () => {
console.log('服务器运行于端口 3000');
});
Cookie 的使用例子：
- 认证: Cookie 经常用于存储会话令牌，以在请求间验证用户身份。
- 用户偏好: Cookie 可以存储用户设置，如界面语言或主题。
- 用户追踪: Cookie 可以用于追踪用户在网站上的行为，以便分析和内容个性化。
GO TO FULL VERSION