javascript Cookie是什么_如何用它存储用户会话信息?

Cookie是浏览器提供的小型客户端存储机制,用于弥补HTTP无状态缺陷,通过服务端下发Session ID维持会话;其由name=value及expires、path、domain、secure、HttpOnly、SameSite等属性组成,需注意编码、大小限制与安全设置。

JavaScript 中的 Cookie 是浏览器提供的一种小型客户端存储机制,本质是服务器通过 HTTP 响应头下发、浏览器自动保存并在后续请求中回传的一段键值对数据。它最核心的作用,就是弥补 HTTP 协议“无状态”的缺陷,让网站能识别用户、维持登录态或记住偏好。

Cookie 的基本组成与特点

每条 Cookie 至少包含一个 name=value 对,还可附加多个可选属性:

  • expiresmax-age:决定有效期;不设则为会话 Cookie(关闭浏览器即失效)
  • path:指定哪些路径下的请求会携带该 Cookie(常用 "/" 表示全站)
  • domain:限制生效的域名(如 ".example.com" 可被子域共享)
  • secure:仅在 HTTPS 连接下传输
  • HttpOnly:禁止 JavaScript 读取(防 XSS,但不影响服务端使用)
  • SameSite:控制跨站请求是否携带 Cookie(推荐设为 "Lax" 或 "Strict")

用 Cookie 存储用户会话信息的典型流程

实际中,Cookie 本身不直接存用户密码或敏感数据,而是作为“通行证”——通常只存一个由服务端生成的、随机且不可预测的 Session ID。具体步骤如下:

  • 用户成功登录后,服务端创建会话,生成唯一 Session ID(如 sess_abc123),并将其关联到服务器内存或 Redis 中的用户数据
  • 服务端通过 Set-Cookie 响应头将 Session ID 写入浏览器:
    Set-Cookie: sessionId=sess_abc123; Path=/; HttpOnly; Secure; SameSite=Lax
  • 此后每次请求,浏览器自动在 Cookie 请求头中带上该值,服务端据此查找对应会话数据
  • 前端 JavaScript 如需感知登录状态(如显示用户名),可读取非 HttpOnly 的辅助 Cookie(如 userInfo),但敏感操作仍应以服务端校验为准

JavaScript 中手动操作 Cookie 的注意事项

虽然现代应用更倾向用 localStorage + JWT 配合后端鉴权,但在某些场景(如兼容老系统、需服务端强依赖)仍需 JS 操作 Cookie。关键点包括:

  • document.cookie 是一个字符串,读写都需手动解析/拼接,建议封装工具函数
  • 中文或特殊字符必须用 encodeURIComponent() 编码,读取时用 decodeURIComponent()
  • 设置过期时间要用 GMT 格式(toUTCString())或 max-age(秒数),避免本地时区误差
  • 删除 Cookie:把 expires 设为过去时间,且 pathdomain 必须与设置时一致
  • 单域名下 Cookie 总大小上限约 4KB,总数通常不超过 50 条,不适合存大量数据

安全提醒:别把敏感信息放 Cookie 里

Cookie 会随每次请求自动发送,容易被中间人截获或遭 XSS 攻击窃取。因此:

  • 绝不存储明文密码、身份证号、token 密钥等
  • 涉及身份凭证的 Cookie 务必设置 HttpOnlySecure
  • 避免在 Cookie 中存用户权限等级等可被篡改的信息,所有关键判断交由服务端完成
  • 启用 SameSite 属性防范 CSRF 攻击