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. 安全相关属性

属性	说明	推荐值
HttpOnly	防止XSS攻击访问Cookie	true
Secure	仅通过HTTPS传输	生产环境启用
SameSite	控制跨站请求Cookie发送	Lax/Strict

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对比

特性	Cookie	localStorage	sessionStorage
容量限制	4KB左右	5MB+	5MB+
自动发送到服务器	是	否	否
生命周期	可设置过期时间	永久	会话结束清除

六、实战案例分析

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