Cookie 是伺服器透過 HTTP 響應頭 Set-Cookie 送至瀏覽器的鍵值對，瀏覽器後續請求自動攜帶同域 Cookie。本文系統梳理其屬性、交互流程，並提供一套易用的 JavaScript 封裝庫。
Set-Cookie: customer=huangxp; path=/foo; domain=ibm.com; expires=Wed, 19-Oct-2005 23:12:40 GMT; Secure; HttpOnly| 屬性 | 說明 |
|---|---|
domain | 關聯域名，預設為當前請求域。不匹配時瀏覽器拒絕存儲 |
path | 路徑前綴過濾，只有請求路徑匹配才發送 Cookie |
expires | 過期時間（GMT），缺失則為會話級 Cookie，關閉瀏覽器失效 |
Secure | 僅 HTTPS 傳輸 |
HttpOnly | 禁止 JavaScript 讀取（防 XSS），需 IE6+ 支援 |
Set-Cookie 頭Cookie: name1=val1; name2=val2 頭發送HttpCookie ck = new HttpCookie("TestCK");
ck.setValue("1"); ck.setDomain("example.com"); ck.setPath("/");
ck.setMaxAge(3600); ck.setHttpOnly(true); ck.setSecure(true);
response.addCookie(ck);document.cookie // "TestCK=1; other=2"
document.cookie.split("; ").reduce((obj, kv) => { const [k,v]=kv.split("="); obj[k]=v; return obj; }, {})document.cookie = "TestCK=1; expires=Wed, 19 Oct 2025 23:12:40 GMT; path=/; domain=example.com";Cookie[] cookies = request.getCookies();
for (Cookie c : cookies) if ("TestCK".equals(c.getName())) value = c.getValue();document.cookie 無法讀取 domain、path、expires、HttpOnly 等屬性expires=過期時間HttpCookie 支援 Values 集合，客戶端以 & 分隔（name=val1&val2）提供類似服務端 HttpCookie 的操作體驗：
// 核心類
function CookieObj(name) { this.Name = name; this.KeyValues = []; }
CookieObj.prototype = {
set: function(key, value) { /* 支援單值/多值 */ },
remove: function(key) { /* 刪除指定鍵 */ },
get: function() { return this.getItemByKey("__Default"); },
getItemByKey: function(key) { /* 返回 KeyValuePair */ }
};
var CookieAdapter = {
getCookies: function() { /* 解析 document.cookie 返回 CookieObj[] */ },
getCookieByName: function(name) { /* 查找單個 */ },
setCookies: function(arr, expires, domain, path, secure, httponly) { /* 批量寫入 */ },
_ConvertToCookieObj: function(str) { /* 內部解析 */ }
};// 寫入
var ck = new CookieObj("User");
ck.set("__Default", "john");
ck.set("role", "admin");
CookieAdapter.setCookies([ck], new Date("2025-12-31"), "example.com", "/");
// 讀取
var cookies = CookieAdapter.getCookies();
var user = CookieAdapter.getCookieByName("User");
console.log(user.get().Value); // "john"
console.log(user.getItemByKey("role").Value); // "admin"
// 刪除
user.remove("role");
CookieAdapter.setCookies([user]);HttpOnly; Securedomain=.example.comlocalStorage + Authorization Header，減少 Cookie 體積與 CSRF 風險
