Session和LocalStorage用户可以随意篡改 Cookie，Session 可以解决这个问题，防止用户篡改。

`Cookie` 存在的问题

用户可以随意篡改 Cookie，Session 可以解决这个问题，防止用户篡改。

`Session` 与 `Cookie` 的关系

Cookie
1. 服务器通过 Set-Cookie 头给客户端一串字符串
2. 客户端每次访问相同域名的网页时，必须带上这段字符串
3. 客户端要在一段时间内保存这个 Cookie
4. Cookie 默认在用户关闭页面后就失效，后台代码可以任意设置 Cookie 的过期时间
5. 大小大概在 4kb 以内
Session

服务器通过 Cookie 给用户一个 SessionID ，然后 SessionID 对应服务器里的一小块内存，每次用户访问服务器的时候，服务器通过 SessionID 去读取对应的 Session，然后知道用户的信息。
1. 将 SessionID（随机数）通过 Cookie 发给客户端
2. 客户端访问服务器时，服务器读取 SessionID
3. 服务器有一块内存（哈希表）保存了所有 session
4. 通过 SessionID 我们可以得到对应用户的隐私信息，如 id、email
5. 这块内存（哈希表）就是服务器上的所有 session
LocalStorage
```
// 增加了一个数据项目
localStorage.setItem('myCat', 'Tom');

// 读取 localStorage 项
let cat = localStorage.getItem('myCat');

// 移除 localStorage 项
localStorage.removeItem('myCat');

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

1、2、3 和 4 同 LocalStorage
1. SessionStorage 在用户关闭页面（会话结束）后就失效。
Cookie 和 Session 是什么关系

一般来说，Session 是基于 Cookie 实现的。因为 Session 必须将 SessionID 放到 Cookie 里面，然后再发给客户端，没有这个 SessionID 就没有 Session , Session 是依赖于 Cookie 的。
Cookie 和 LocalStorage 的区别

Cookie 每次请求的时候都会带给服务器，LocalStorage 的值不会带给服务器。Cookie 的最大储存量为 4kb，而 LocalStorage 为 5MB

`HTTP` 缓存（web性能优化）

Cache-Control 是什么

Cache-Control 可以让浏览器在一段时间内不访问服务器，直接用本地的硬盘或内存作为响应，这样就极快极快，连请求都没有。
1. Cache-Control （设置多久时间内不要再请求相同的 URL）
```
// 客户端可以在HTTP请求中使用的标准 Cache-Control 指令
response.setHeader('Cache-Control', 'max-age=31536000')
```
2. 为什么首页(html) 不能设置 Cache-Control
  
  因为如果连首页都缓存了，那么用户刷新了就不会问服务器任何问题，这个时候如果代码更新了（页面更新），用户无法获取最新的版本，一般会把首页留作入口，不设置缓存。
3. 一般来说的策略是：尽量把一个版本缓存有多长就缓存多长，如果要升级的话，就改一下 URL，又能缓存很久时间。
Expires （指定一个时间/日期 (本地时间)，即在此时候之后，响应过期。）
```
response.setHeader('Expires', 'Wed, 31 Jul 2019 07:28:00 GMT')
```
1. 如果设置了Cache-Control 响应头，那么Expires 就会被忽略。
2. Expires 和 Cache-Control 的区别：
  
  Cache-Control 是设置时间长度，而Expires 是设置时间点，如果两个都设置了优先使用 Cache-Control。
ETag（用来给文件一个版本号）
1. MD5摘要算法：把一个文件变成一个字符串，如果这个文件有任何一个地方改了，他就会变成一个差异很大的字符串。
```
var md5 = require('js-md5')
var fileMD5 = md5(string)
response.setHeader('ETag', fileMD5)
```
  这样在响应头就会多了一个 ETag，它的值就是这个 MD5。这有什么用呢？在页面下次刷新后，请求头里面多了一个 If-None-Match，它把上一次的 MD5 放在下一次的 If-None-Match 里面，如果这个值和浏览器里面的MD5一样，说明不需要下载（304：请求已被允许，但文件未变化。）
2. ETag 和 Cache-Control 的区别：
  
  用Cache-Control 是直接不请求，ETag 是不下载但是还是要请求（ETag 和 If-None-Match 如果匹配就不用下载，如果不匹配则下载）。

Session和LocalStorage

Cookie 存在的问题

Session 与 Cookie 的关系

HTTP 缓存（web性能优化）

`Cookie` 存在的问题

`Session` 与 `Cookie` 的关系

`HTTP` 缓存（web性能优化）