从Cookie谈到浏览器缓存

Cookie的作用？

Cookie是一种客户端的一种数据存储方式；

作用：

1. 保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。

2. 跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。

Cookie是怎么生成？

是由于：HTTP response

如果服务器端希望在浏览器种 cookie,那么它只需要在 HTTP 请求头信息中，放置一个 Set-Cookie 的字段。

Cookie长什么样？几个重要属性

先打开浏览器调试——Application——Cookies——选中一个域；上面就会有这些 cookie 的名称，值，Domain，Path，Expires/Max-age，Size，HTTP，Secure

Expires 和 Max-Age

这两个属性和强缓存有关（讲http的时候会讲到，关于http强缓存的知识点）

Domain 和 path

这两个属性决定了，HTTP 请求的时候，哪些请求会带上哪些 Cookie

谈谈HTTP request——cookie 发送
如果每个请求我们都会带上所有的 cookie，性能就会十分低下了。那么浏览器是根据什么判别哪些请求会带上哪些 cookie 呢？这就跟 Domain 和 path 属性息息相关了。
比如，现在一个 cookie 它的 Domain 属性为 www.example.com，path 属性值为 /。意味着，这个 cookie 对该域的根路径以及它的所有子路径都有效。如果我们修改了它的 path 值，为 /forum，那么这个 cookie 只要在访问 www.example.com/forum 及其子路径时才会带上。

Secure 和 HttpOnly

1.Secure 属性指定浏览器只有在加密协议 HTTPS 下，才能将这个 Cookie 发送到服务器。另一方面，如果当前协议是 HTTP，浏览器会自动忽略服务器发来的 Secure 属性。该属性只是一个开关，不需要指定值。如果通信是 HTTPS 协议，该开关自动打开。

设置了 Secure 这个属性，那么就会在 Secure 这一栏打钩

2.HttpOnly 属性指定该 Cookie 无法通过 JavaScript 脚本拿到，主要是Document.cookie 属性、XMLHttpRequest 对象和Request API都拿不到该属性。这样就防止了该 Cookie 被脚本读到，只有浏览器发出 HTTP 请求时，才会带上该 Cookie。

设置了 HttpOnly 这个属性，那么就会在 HTTP 这一栏打钩

cookie、localStorage、sessionStorage

浏览器实现缓存的方法（ HTTP缓存机制 ）

（这里的知识点可以让我们更好地了解返回304状态码的情况）

在此之前，要了解浏览器发起HTTP请求 – 服务器响应该请求的过程：

可以get到两个点：

• 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识
• 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中

浏览器实现缓存的方法包括强缓存、协商缓存；

强缓存、协商缓存，这个写得很好，推荐：https://juejin.im/entry/5ad86c16f265da505a77dca4