Cookie、Session、LocalStorage、Cache-Control、ExpiresETag

Cookie

Cookie 是浏览器访问服务器后，服务器传给浏览器的一段数据。
服务器通过 Set-Cookie 头给客户端一串字符串
客户端每次访问相同域名的网页时，必须带上这段字符串
客户端要在一段时间内保存这个Cookie
Cookie 默认在用户关闭页面后就失效，后台代码可以任意设置 Cookie 的过期时间

Cookie的用途
1.识别用户身份
比如：zink访问test.com，test.com的服务器为zink设置Cookie：userId='zink'，此后zink每次访问test.com的其他页面是，都会带上这个Cookie。同理，jack访问test.com，test.com为jack设置Cookie：userId='jack'，此后jack访问test.com的其他页面时，都会带上这个Cookie，这样，test.com的服务器就能区分出zink和jack两名用户了。
2.记录历史
例如：当用户浏览一个购物网战时，用户将商品添加到购物车，此时JS改写Cookie，将商品追加到其中并发送到服务器，当用户访问这个购物网站的其他页面时，带上这段Cookie，其他页面也知道购物车里有什么商品。

问题：

1. 我在Chrome登陆了得到了Cookie，用Safari 访问，Safari会带上 Cookie 吗？
   答：NO
2. Cookie存在哪？
   Windows 存在C盘的文件里
3. Cookie能作假吗？
   能
4. Cookie有有效期吗？
   有，默认有效期20分钟左右，后端可以强制设置有效期

---

Session

什么是Session？
1.将SessionId（随机数）通过cookie发给客户端
2.客户端访问服务器时，服务器都去SessionId
3.服务器有一块内存（对象）把偶你了所有Session
4.通过SessionId我们可以得到对应用户的隐私信息，如id。email
5.这块内存（哈希表）就是服务器上的所有Session

---

LocalStorage

LocalStorage是HTML5提供的API
本质是一个hash
LocalStorage.setItem(name, value)
LocalStorage.GetItem(name)
LocalStorage.clear()
这三个API的作用都是操作当前页面的hash

使用LocalStorage
存在C盘的一个文件里，可以做到持续化存储
1.LocalStorage 与 HTTP 无关
2.HTTP不会带上LocalStorage的值
3.只有相同域名的页面才能互相读取 LocalStorage（没有同源那么严格）
4.每个域名 LocalStorage 最大存储量为5MB左右（每个浏览器不一样）
5.常用场景：用来记录有没有提示过用户（没有用的信息，不能记密码）
6.LocalStorage 永久有效，除非用户清理

SessionStorage（会话存储）
用法与LocalStorage相同
1，2，3，4同上
5.SessionStorage在用户关闭页面后就失效

面试题：
1.请问cookie和session是什么关系？
session是基于cookie实现的。因为session将sessionID放到cookie再发送给客户端
2.cookie和LocalStorage的区别是什么？
cookie会被浏览器带到服务器，LocalStorage不会
存储量 10倍关系
3.LocalStorage和SessionStorage什么关系
SessionStorage在会话结束后就失效

---

HTTP缓存

web性能优化

Cache-Control （多久过期，时间长度）

如果我们的css和js文件很大，那么如何加快我们css和js的请求呢？

response.setHeader('Cache-Control', 'max-age=30000')

设置max-age的时间，一般为一年，一年只能只要是相同的url，客户端就不会向服务器发起请求，而是使用本地磁盘的缓存。

---

Expires （什么时候过期，时间点）

基本与Cache-Control相同，但Expires以用户的本地时间为基准

---

ETag

response.setHeader('ETag', MD5)

MD5是一种信息摘要算法，验证文件是否修改
Cache-Control 不请求
ETag 不下载但要请求