cookie、session、cache-control等

前言

首先我们来复习一下HTTP的相关知识，关于请求与响应组成部分详情知识请查看这：
Chrome客户端向server发请求request，HTTP是80端口，HTTPS则是443端口。
server会对Chrome客户端作出响应response
响应头包括cookie，cache-control。

cookie

• 服务器通过 Set-Cookie 响应头给客户端一串字符串
• 服务器得到 Cookie 后，客户端每次访问相同域名的网页时，必须带上这段字符串
• 客户端要在一段时间内保存这个Cookie
• Cookie 是有有效期的，默认在用户关闭页面后就失效，后台代码可以任意设置 Cookie 的过期时间
• 大小大概在 4kb 以内
• Cookie 存在的问题在于其可被用户可以随意篡改

Session

• 将 SessionID（随机数）通过 Cookie 发给客户端
• 客户端访问服务器时，服务器读取 SessionID
• 服务器有一块内存（哈希表）保存了所有 session
• 通过 SessionID 我们可以得到对应用户的隐私信息，如 id、email
• 这块内存（哈希表）就是服务器上的所有 session

LocalStorage

• LocalStorage 跟 HTTP 无关
• HTTP 不会带上 LocalStorage 的值
• 只有相同域名的页面才能互相读取 LocalStorage（没有同源那么严格）
• 每个域名 localStorage 最大存储量为 5Mb 左右（每个浏览器不一样）
• 常用场景：记录有没有提示过用户（没有用的信息，不能记录密码）
• LocalStorage 永久有效，除非用户清理缓存

SessionStorage（会话存储）

1、2、3、4 同上

• SessionStorage 在用户关闭页面（会话结束）后就失效。

Cache-Control（本地文件，无请求）

cache-control：max-age = 3600 是设置过期时长（相对时间），跟本地时间无关。

cache-control可以让浏览器在一段时间内不访问服务器（使用max-age，如response.setHeader('Cache-Control','max-age=300000000')），直接用本地的硬盘或内存作为响应，这样能够节省渲染页面的时间；当我们更新页面时，只要更新一下url路径即可，这样浏览器就不会再使用缓存而是去下载最新的版本。

Expires

Expires 是设置过期时间（绝对时间），但是如果用户的本地时间错乱了，则有可能出现问题。

Expires 的使用方法，如：
response.setHeader('Expires','Sun,04 Feb 2018 14:55:08 GM')
当设置了max-age/s-max-age指令的Cache-Control响应头时，Expires会被忽略。

ETag（发请求）

ETag 是通过对比浏览器和服务器资源的特征值（如MD5）来决定是否要发送文件内容，如果一样就只发送304（not modified）。

---

区别

1. Cache-Control VS Expires
   Cache-Control是设置多久过期的，而Expires则是设置什么时候过期。我们应该优先使用Cache-Control，因为Expires 设置的过期时间指的是本地时间，而我们不能保证用户的本地时间是否正确。
2. Cookie VS LocalStorage
   2.1 Cookie 会被发送到服务端，而 LocalStorage 不会
   2.2 Cookie 一般最大4k，LocalStorage 根据各浏览器不同，可用5Mb甚至10Mb
   2.3 Cookie 存用户信息，LocalStorage 存不重要信息
3. Cookie VS Session
   3.1 Cookie 存在浏览器文件里，而 Session 存在服务器文件里
   2.2 Session 是基于Cookie 实现的，具体做法就是把SessionID 存在Cookie里
4. LocalStorage VS SessionStorage
   LocalStorage 一般不会自动过期（除非用户手动清除），而SessionStorage 在会话结束时就过期（如关闭浏览器）。