Cookie使用實例代碼分析

# Cookie使用實例代碼分析

## 一、Cookie基礎概念

Cookie是網站在用戶瀏覽器上存儲的小型文本數據，主要用于會話狀態管理、個性化設置和用戶行為跟蹤。根據生命周期可分為：
- 會話Cookie：瀏覽器關閉后自動刪除
- 持久Cookie：通過`Expires`或`Max-Age`設置有效期

## 二、前端Cookie操作實例

### 1. 原生JavaScript實現

```javascript
// 設置Cookie
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=/`;
}

// 獲取Cookie
function getCookie(name) {
  const cookies = document.cookie.split(';');
  for(let cookie of cookies) {
    const [cookieName, cookieValue] = cookie.trim().split('=');
    if(cookieName === name) return decodeURIComponent(cookieValue);
  }
  return null;
}

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

2. 實際應用場景

用戶主題偏好存儲

// 設置主題
function setTheme(theme) {
  setCookie('user_theme', theme, 30);
  applyTheme(theme);
}

// 頁面加載時應用主題
window.addEventListener('DOMContentLoaded', () => {
  const savedTheme = getCookie('user_theme') || 'light';
  applyTheme(savedTheme);
});

三、后端Cookie處理示例

1. Node.js (Express框架)

const express = require('express');
const cookieParser = require('cookie-parser');
const app = express();

app.use(cookieParser());

// 設置Cookie
app.get('/set-cookie', (req, res) => {
  res.cookie('user_token', 'abc123', {
    maxAge: 86400000, // 1天
    httpOnly: true,
    secure: true,
    sameSite: 'strict'
  });
  res.send('Cookie已設置');
});

// 讀取Cookie
app.get('/get-cookie', (req, res) => {
  const token = req.cookies.user_token;
  res.send(`獲取到的Token: ${token}`);
});

// 刪除Cookie
app.get('/logout', (req, res) => {
  res.clearCookie('user_token');
  res.send('已退出登錄');
});

2. Java Servlet實現

// 設置Cookie
protected void doGet(HttpServletRequest request, HttpServletResponse response) {
  Cookie userCookie = new Cookie("last_visit", new Date().toString());
  userCookie.setMaxAge(60*60*24*7); // 一周有效期
  userCookie.setHttpOnly(true);
  response.addCookie(userCookie);
}

// 讀取Cookie
Cookie[] cookies = request.getCookies();
if (cookies != null) {
  for (Cookie cookie : cookies) {
    if ("last_visit".equals(cookie.getName())) {
      System.out.println("最后訪問時間: " + cookie.getValue());
    }
  }
}

四、安全實踐與注意事項

1. 安全相關屬性

2. 常見漏洞防范

CSRF防護方案：

// 生成并存儲CSRF Token
const csrfToken = generateRandomString();
res.cookie('XSRF-TOKEN', csrfToken, {
  httpOnly: false, // 需要前端讀取
  sameSite: 'strict'
});

// 前端發送請求時攜帶
fetch('/api/payment', {
  method: 'POST',
  headers: {
    'X-XSRF-TOKEN': getCookie('XSRF-TOKEN')
  }
});

五、現代Web替代方案對比

1. Web Storage API

// localStorage長期存儲
localStorage.setItem('user_settings', JSON.stringify(settings));

// sessionStorage會話存儲
sessionStorage.setItem('temp_data', data);

2. Cookie與Storage對比

六、實戰案例分析

1. 購物車實現方案

混合存儲策略：

// 未登錄用戶使用Cookie
function saveCartItems(items) {
  if (isLoggedIn()) {
    // 已登錄用戶同步到服務器
    api.saveCart(items); 
  } else {
    setCookie('guest_cart', JSON.stringify(items), 7);
  }
}

// 讀取時合并數據
function loadCart() {
  let items = [];
  if (isLoggedIn()) {
    items = api.getCart();
    // 合并未登錄時的購物車
    const guestCart = getCookie('guest_cart');
    if (guestCart) items = mergeCarts(items, JSON.parse(guestCart));
  } else {
    const cartData = getCookie('guest_cart');
    if (cartData) items = JSON.parse(cartData);
  }
  return items;
}

2. 多域名共享Cookie

// 主域名設置
document.cookie = `language=zh; domain=.example.com; path=/; max-age=31536000`;

// 子域名可讀取
// sub.example.com能讀取.example.com設置的Cookie

七、調試與問題排查

1. 瀏覽器開發者工具查看：

   • Application > Storage > Cookies
   • 可查看每個Cookie的詳細屬性

2. 常見問題：

   • 域名/路徑不匹配導致Cookie未發送
   • HTTPS頁面無法設置非Secure Cookie
   • 瀏覽器隱私設置阻止第三方Cookie

結語

Cookie作為Web開發的基礎技術，雖然面臨新的存儲方案競爭，但在會話管理、身份認證等場景仍不可替代。合理設置安全屬性、選擇適當的存儲策略，并配合現代Web技術使用，可以構建既安全又用戶友好的Web應用。 “`

注：本文實際約1450字，包含代碼示例、對比表格和實用案例分析，完整覆蓋Cookie的使用場景和技術細節。