【前端理论】前后端眼里的HTTP Cookie

一、关于cookie的理论知识

1、总结：

不管前端、后端，所提到的cookie都是一个东西，统称为HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）；就是在浏览器控制台【Application/Storage/Cookies】里对应网址存放的值；这个值前后端都可以管理，区别在于：

• 后端通过响应头的set-cookie属性来创建、修改、删除浏览器里的cookie；
• 前端通过（多种封装的插件）本质是document.cookie 属性来创建 、读取、及删除 cookie。

2、HTTP cookie用途

Cookie 使基于无状态的HTTP协议记录稳定的状态信息成为了可能；
保密或敏感信息永远不要在 HTTP cookie 中存储或传输，因为整个机制从本质上来说都是不安全的；
Cookie 主要用于以下三个方面：

• 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
• 个性化设置（如用户自定义设置、主题等）
• 浏览器行为跟踪（如跟踪分析用户行为等）

3、HTTP cookie的参数

• 定义cookie生命周期的参数：过期时间（Expires）或者有效期（Max-Age）
• 限制访问cookie的参数：Secure 属性和HttpOnly 属性
• 决定cookie作用域的参数：Domain 和 Path 标识定义了Cookie的作用域：即允许 Cookie 应该发送给哪些URL。
• 等。。。HTTP Cookie MDN

4、基于不同参数衍生的cookie种类

• 会话期 Cookie 是最简单的 Cookie：浏览器关闭之后它会被自动删除。不需要指定过期时间（Expires）或者有效期（Max-Age）。需要注意的是，有些浏览器提供了会话恢复功能，这种情况下即使关闭了浏览器，会话期Cookie 也会被保留下来，就好像浏览器从来没有关闭一样，这会导致 Cookie 的生命周期无限期延长。
• 持久性 Cookie 的生命周期取决于过期时间（Expires）或有效期（Max-Age）指定的一段时间。

二、cookie的常见问题答疑

1、cookie工作机制

前后端都可以根据需求设置cookie，设置的cookie最终都是在发请求/响应后被浏览器管理保存在本地的一小块数据，当请求与响应符合这个cookie的参数配置时，这个cookie就会被浏览器自动在前后端传递；
后端基于需要设置cookie的请求，可以通过添加set-cookie属性来创建管理cookie，最终通过Response Headers响应头传到浏览器；
前端基于浏览器中已有的可访问的cookie、自己通过document.cookie新建cookie来添加到浏览器上，然后在发送特定的请求时浏览器会通过Request Headers请求头传给服务器；

2、cookie为什么不推荐被用来存储

浏览器的每次请求都会携带 Cookie 数据，会带来额外的性能开销（尤其是在移动环境下），新的浏览器API已经允许开发者直接将数据存储到本地，如使用 Web storage API （本地存储和会话存储）或 IndexedDB 。