js cookie 传值

一、基础概念

Cookie
- 在JavaScript中，Cookie是一种存储在用户浏览器中的小型数据片段。它由键值对组成，并且可以包含一些额外的属性，如过期时间、路径、域等。
- 当浏览器向服务器发送请求时，会自动将相关的Cookie随请求一起发送（如果符合条件的话）。

Cookie传值原理
- 服务器可以通过设置Set - Cookie响应头来创建Cookie并发送给浏览器。例如，在Node.js的Express框架中：
- 服务器可以通过设置Set - Cookie响应头来创建Cookie并发送给浏览器。例如，在Node.js的Express框架中：
- 在这个例子中，当访问/setCookie路由时，服务器设置了一个名为username，值为JohnDoe的Cookie，maxAge表示Cookie的有效时长（这里是900000毫秒即15分钟），httpOnly属性表示这个Cookie只能通过HTTP协议访问，不能通过JavaScript访问（这是一种安全措施）。
- 浏览器接收到这个Cookie后，会在后续对同一域名（或者符合域相关规则的子域名）的请求中，将这个Cookie包含在请求头中的Cookie字段发送给服务器。
- 在前端JavaScript中，可以通过document.cookie来读取和设置Cookie（需要注意安全性和兼容性问题）。例如，读取Cookie：
- 在前端JavaScript中，可以通过document.cookie来读取和设置Cookie（需要注意安全性和兼容性问题）。例如，读取Cookie：

二、优势

会话跟踪
- 可以方便地跟踪用户的会话状态。例如，在用户登录网站后，可以将用户的登录状态信息存储在Cookie中，这样在用户浏览不同页面时，服务器可以通过读取Cookie来确定用户是否已经登录。

三、类型（按照存储时长分）

会话Cookie
- 不设置过期时间或者过期时间为会话结束时（通常是浏览器关闭时）。这种Cookie主要用于临时存储一些信息，如购物车中的临时商品信息等。

持久Cookie
- 设置了具体的过期时间，在这个时间范围内，Cookie会一直存在于浏览器中。例如，用户的登录状态Cookie如果设置为持久Cookie，即使用户关闭浏览器重新打开，在过期时间之前仍然可以保持登录状态。

四、应用场景

五、常见问题及解决方法

Cookie丢失或无法读取
- 原因
  - 可能是路径或域设置不正确。如果Cookie设置了特定的路径或域，在不符合这些条件的请求中就无法发送或读取。
  - 浏览器设置可能阻止了Cookie的接收或发送，例如隐私设置较高的浏览器可能会限制第三方Cookie。
  - 如果是在开发环境中，可能是服务器没有正确设置Set - Cookie头或者前端代码读取Cookie的逻辑有误。
- 解决方法
  - 检查Cookie的路径和域设置是否正确。如果要使Cookie在整个域名下可用，不要设置过于严格的路径或域。
  - 查看浏览器设置，确保没有阻止Cookie的相关选项被开启。
  - 仔细检查服务器端设置Cookie的代码和前端读取Cookie的代码逻辑。

安全问题（如XSS攻击利用Cookie）
- 原因
  - 如果Cookie没有设置httpOnly属性，恶意脚本可以通过JavaScript获取Cookie中的敏感信息，然后发送给攻击者。
- 解决方法
  - 对于包含敏感信息的Cookie，如身份验证令牌等，尽量设置httpOnly属性。
  - 同时，对用户输入进行严格的验证和过滤，防止XSS攻击的发生，从而间接保护Cookie的安全。