Cookie是浏览器提供的客户端小型文本存储机制，用于保存登录状态等数据，由服务器通过Set-Cookie设置、浏览器自动回传，具大小限制、作用域控制及HttpOnly等安全属性。
Cookie 是浏览器提供的一种小型文本存储机制，用于在客户端（用户电脑）保存少量数据，比如登录状态、用户偏好或会话标识。它由服务器通过 HTTP 响应头 Set-Cookie 发送，浏览器自动保存，并在后续同源请求中通过 Cookie 请求头回传给服务器。
Cookie 的基本特点
• 每个 Cookie 大小通常限制在 4KB 左右，且同一域名下总数量有限（一般约 50 个）
• 默认是会话级的（关闭浏览器即失效），但可设置 Expires 或 Max-Age 变成持久化
• 支持作用域控制：Domain（指定可读取的域名）、Path（指定路径前缀）
• 安全相关属性：HttpOnly（JS 无法访问，防 XSS）、Secure（仅 HTTPS 传输）、SameSite（防 CSRF）
用 JavaScript 设置 Cookie
原生方式通过 document.cookie 字符串赋值实现，注意格式必须严格：
// 设置一个有效期 7 天的用户昵称 Cookiedocument.cookie = "username=张三; max-age=604800; path=/; domain=.example.com; secure; SameSite=Lax";
// 设置 HttpOnly 的 Cookie 必须由后端写入，前端 JS 无法设置该属性
用 JavaScript 读取 Cookie
document.cookie 返回的是一个分号分隔的字符串，需手动解析：
立即学习“Java免费学习笔记（深入）”；
// 简单工具函数：按名称获取 Cookie 值
function getCookie(name) {<br>
const cookies = document.cookie.split('; ');<br>
for (let cookie of cookies) {<br>
const [key, value] = cookie.split('=');<br>
if (key === name) return decodeURIComponent(value);<br>
}<br>
return null;<br>
}// 使用示例
const user = getCookie('username'); // "张三"
更安全实用的替代方案
现代开发中，直接操作 Cookie 存在局限性和安全风险，推荐组合使用：
• 敏感信息（如 token）优先由后端设为 HttpOnly + Secure + SameSite=Strict，前端不读写
• 非敏感偏好类数据（主题、语言）可用 localStorage 或 sessionStorage 替代，API 更友好
• 如需跨页面共享且需服务端参与的状态，仍用 Cookie，但建议封装工具类统一处理编码、过期和作用域
• 使用第三方库如 js-cookie 可简化操作并自动处理 URL 编码
