5.1 Cookie 的基本特性
Cookie 是一些網站可以儲存在用戶端（用戶的瀏覽器）的小數據片段。它們出現於 localStorage 之前的 20 年，並且一直協助完成其功能。即使在現在，它們仍常常被用於保存會話狀態資訊、用戶偏好設定、追蹤等任務。
Cookie 的基本特性：
- 名稱和值 (name=value): 儲存數據的鍵值對。
- 網域和路徑 (domain, path): 確定哪些 URL 和網域可使用 Cookie。
- 生命週期 (expires, max-age): 確定 Cookie 到期並被刪除的時間。
- 安全性 (secure, HttpOnly): 指定如何及何時可傳遞 Cookie。
設置 Cookie
可以使用 JavaScript 或服務端代碼設置 Cookie。在 JavaScript 中使用 document.cookie 屬性。
設置 Cookie 的 JavaScript 範例：
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;
}
// 獲取名為 "username" 的 Cookie 的值
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 範例</title>
</head>
<body>
<button onclick="handleSetCookie()">設置 Cookie</button>
<button onclick="handleGetCookie()">獲取 Cookie</button>
<button onclick="handleDeleteCookie()">刪除 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 的使用範例：
- 身份驗證: 常用於保存會話令牌，以驗證用戶的請求。
- 用戶偏好: 可以儲存用戶設定，如介面語言或主題。
- 用戶追蹤: 可以用於跟蹤用戶在網站上的行為，以進行分析和內容個性化。
GO TO FULL VERSION