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的使用场景和技术细节。