JavaScript通过操作Cookie管理用户状态，与后端Session配合；2. 可用setCookie设置带过期时间的Cookie；3. getCookie函数读取指定名称的Cookie值。
在Web开发中，管理用户状态是关键的一环。JavaScript作为前端核心语言，虽然不能直接操作服务器端的Session，但可以通过操作Cookie来实现与后端配合的状态管理。下面介绍如何使用JavaScript处理Cookie，并理解其与Session的关系。
Cookie的基本操作
Cookie是存储在浏览器中的小型文本数据，常用于保存用户偏好、登录状态等信息。JavaScript提供了原生方式来读写Cookie。
设置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 + "=" + encodeURIComponent(value) + expires + "; path=/";
}
这个函数允许你设置一个带过期时间的Cookie。path=/ 表示整个站点都可访问该Cookie。
读取Cookie：
function getCookie(name) {const nameEQ = name + "=";
const ca = document.cookie.split(';');
for(let i = 0; i let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
}
return null;
}
通过遍历document.cookie分割后的数组，查找指定名称的值。
删除Cookie：
function deleteCookie(name) {setCookie(name, "", -1);
}
将过期时间设为过去即可删除Cookie。
Session与Cookie的关系
Session是服务器端维护的用户会话状态，通常依赖Cookie来保存Session ID。浏览器在每次请求时自动发送对应域名下的Cookie，服务器通过其中的Session ID识别用户。
例如，用户登录后，服务器生成一个唯一的Session ID并写入Cookie（如：PHPSESSID=abc123），之后浏览器自动携带该ID，服务器据此查找对应的Session数据。
JavaScript无法直接访问服务器端的Session内容，但可以读取包含Session ID的Cookie（如果未设置HttpOnly）。
安全注意事项
操作Cookie时需注意以下几点以保障应用安全：
- 敏感信息不要明文存储在Cookie中
- 设置Secure标志确保Cookie只通过HTTPS传输
- 使用HttpOnly防止JavaScript访问重要Cookie（如Session ID），避免XSS攻击窃取
- 设置SameSite属性防范CSRF攻击
- 合理设置过期时间，避免长期有效的凭证
现代开发中，许多应用采用Token机制（如JWT）替代传统Session，将状态信息编码在Token中，通过LocalStorage或Authorization头传递，减少对Cookie的依赖。
前端状态管理建议
尽管JavaScript能操作Cookie，但在实际项目中推荐：
- 登录状态由服务器控制，前端仅做展示逻辑判断
- 使用fetch或axios拦截器自动附加认证信息
- 结合localStorage管理非敏感用户状态，如主题偏好
- 重要身份凭证仍优先使用HttpOnly Cookie
基本上就这些。理解Cookie和Session的协作机制，有助于构建更安全可靠的Web应用。
