Javascript如何設定和取得Cookie?

在 JavaScript 中，可以使用 document.cookie 來設定和取得 Cookie。以下是設定和取得 Cookie 的方法：

---

1. 設定 Cookie

基本語法

javascript

document.cookie = "key=value; expires=date; path=path; domain=domain; secure; samesite=strict";

範例

javascript

// 設定一個簡單的 Cookie
document.cookie = "username=Alice";

// 設定一個有過期時間的 Cookie
document.cookie = "sessionToken=abc123; expires=Fri, 31 Dec 2024 23:59:59 GMT";

// 設定一個有效路徑的 Cookie
document.cookie = "theme=dark; path=/";

// 設定跨域 Cookie (需伺服器支持)
document.cookie = "authToken=xyz456; domain=example.com";

// 設定安全和 SameSite 屬性
document.cookie = "secureData=true; secure; samesite=strict";

---

2. 取得 Cookie

基本語法

javascript

const allCookies = document.cookie;

document.cookie 返回的是一個由分號分隔的字符串，其中包含所有可訪問的 Cookie。

範例

javascript

// 獲取所有 Cookie
console.log(document.cookie); 
// 輸出: "username=Alice; theme=dark; sessionToken=abc123"

// 解析特定 Cookie
function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key === name) {
      return decodeURIComponent(value); // 解碼值
    }
  }
  return null; // 找不到返回 null
}

// 使用範例
const username = getCookie("username");
console.log(username); // Alice

---

3. 刪除 Cookie

刪除 Cookie 的方式是設定相同名稱的 Cookie，但將其 expires 屬性設為過去的日期。

範例

javascript

// 刪除一個 Cookie
document.cookie = "username=Alice; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// 通用刪除函數
function deleteCookie(name, path = "/") {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}`;
}

// 使用範例
deleteCookie("username");

---

4. 使用封裝函數處理 Cookie

為了方便操作 Cookie，可以封裝一組函數來處理。

javascript

// 設定 Cookie
function setCookie(name, value, days = 7, path = "/") {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  const expires = `expires=${date.toUTCString()}`;
  document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=${path}`;
}

// 取得 Cookie
function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key === name) {
      return decodeURIComponent(value);
    }
  }
  return null;
}

// 刪除 Cookie
function deleteCookie(name, path = "/") {
  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}`;
}

// 使用範例
setCookie("user", "Alice", 5); // 設定 Cookie，保存 5 天
console.log(getCookie("user")); // 獲取 Cookie 值
deleteCookie("user"); // 刪除 Cookie
console.log(getCookie("user")); // null

---

注意事項

1. Cookie 的大小限制：

   • 每個 Cookie 的大小通常限制為 4KB。
   • 每個域名最多可以存儲約 20 個 Cookie。

2. 安全性：

   • 使用 secure 屬性可確保 Cookie 只能通過 HTTPS 傳輸。
   • 使用 samesite=strict 可防範跨站請求偽造（CSRF）。

3. 跨域限制：

   • Cookie 默認只適用於設置它的域名和路徑。

4. 敏感數據：

   • 不要在 Cookie 中存儲敏感數據，建議加密後再存。

---

這樣，你就可以方便地操作 Cookie 來儲存和管理用戶的數據。