Session、LocalStorage、Cache-Control

Session

cookie

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

session

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

LocalStorage

html5 提供的一个 api
localStorage.setItem(key,value) 添加数据
localStorage.getItem(key) 获取数据
localStorage.clear() 清除数据

1. 持久化存储

let a = localStorage.getItem('a')
if(!a){
  a = 0
}else{
  a = parseInt(a,10) + 1
}
console.log('a')
console.log(a)
localStorage.setItem('a',a)

每次刷新 a 的值会加1

2. 第一次进入网站提示，之后不再提示

let already = localStorage.getItem('已经提示')
if(!already){
  alert('网站改版了，添加了新功能:...')
  localStorage.setItem('已经提示', true)
}

LocalStorage 特点:

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

SessionStorage 特点:
前四条同上，
SessionStorage 在用户关闭后就失效了

cookie 和 session 的区别和联系
一般来说，Session是基于 Cookie 实现的，Session 必须将 SessionId 放到 Cookie里面，再发给客户

1. cookie数据存放在客户的浏览器上，session数据放在服务器上。
2. cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
   考虑到安全应当使用session。
3. session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用COOKIE。
4. 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

LocalStorage 和 Cookie 的区别
HTTP 不会带上 LocalStorage 的值，而 Cookie 会被带上。单个cookie保存的数据不能超过4K，LocalStorage 最大存储量为 5MB 左右

LocalStorage 和 SessionStorage 的区别
SessionStorage 在用户关闭（会话结束）后就失效了

HTTP缓存

Cache-Control
指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。
值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age各个消息中的指令含义如下：

• Public指示响应可被任何缓存区缓存。
• Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。
• no-cache指示请求或响应消息不能缓存，该选项并不是说可以设置”不缓存“，容易望文生义
• no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存，完全不存下來。
• max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。
• min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
• max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

可以在后端设置，如：

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

告知客户端该资源在 30s 内是新鲜的，无需向服务器发送请求。
如果需要更新缓存的话，只需要更改下请求的 url，只要不一样就会重新请求。

和 Expires 区别
Expires 设置表示到什么时候过期，Cache-Control 表示多久过期。
同时设置的时候，Expire 会被忽略。

response.setHeader('Expires', 'Wed, 21 Oct 2015 07:28:00 GMT')
// 设置的是本地时间，容易混乱，所以优先用 Cache-Control

Cache-Control缓存 与 ETag 的「缓存」有什么区别
Cache-Control 设置时间段，在设置的时间段之内不会向服务器发送请求
ETag 会请求，但是响应体是空的