Cookie、Session、LocalStorage、Cache-Control

一、Cookie和Session

1. Cookie和Session的关系？

• 一般来说，Session是基于Cookie来实现的；

2. Cookie（它是与HTTP有关的）
   ①服务器通过Set-Cookie这个响应头给客户端一串字符串；
   ②客户端每次访问相同域名的网页时，必须带上这段字符串；
   ③客户端会在一段时间内保存这个Cookie；
   ④Cookie默认在用户关闭浏览器时就失效，但是后台代码可以任意设置Cookie的过期时间；

这就引出了会话Cookie和持久Cookie:
会话Cookie：如果不设置过期时间，那么默认表示这个Cookie的生命周期为浏览器会话期间，一旦关闭浏览器，那么Cookie就消失了；会话Cookie一般保存在内存里；
持久Cookie：如果设置了过期时间，那么Cookie将会保存到硬盘上，关闭后再次打开浏览器，这些Cookie会依然有效直到超过设置的过期时间。
前端永远不要去写或读Cookie，写读Cookie要让后端来操作！！！否则会很影响打开页面的速度

3. Session
   ①服务器会通过Cookie把SessionId（随机数）发给客户端；
   ②客户端访问服务器时，服务器要读取SessionId；
   ③通过SessionId可以获取到用户的隐私信息；
   ④服务器有一块内存保存了所有的Session；
   （SessionId会变化的，但是Session对象是一直存在于服务器内存中的！！）

注意：关闭浏览器只会使保存在客户端内存中的Session Cookie失效，不会使服务器端的Session 对象失效，同样也不会使已经保存到硬盘上的持久化cookie消失；
Session 在以下情况下才会被删除：
a. 程序调用HttpSession.invalidate();
b. 距离上次客户端发送的SessionId时间间隔已超过Session的最大有效时间；
c. 服务器进程被停止；

4. Session最大的缺点就是占内存；而cookie不占内存（都相对于服务器端来说）

二、LocalStorage

①LocalStorage跟HTTP无关，HTTP不会带上LocalStorage 的值；
②只有相同域名的网页才能相互读取LocalStorage 的值；
③每个域名的LocalStorage 的最大存储量为5M左右（每个浏览器不一样）
④LocalStorage 是存在C盘文件的，它是永久有效的，除非用户清理缓存；
⑤它的常见用法是：记录有没有提示过用户一些信息（总之记录一些没用的信息，不能记录密码）

在浏览器中以JSON字符串格式存储，所以需要用到JSON.parse(),JSON.stringify()

三、SessionStorage

• 它与LocalStorage 只有一点不同：SessionStorage在用户关闭网页（即会话结束）后就失效。

四、缓存控制Cache-Control

1. 它如何添加呢？
   通过Cache-Control响应头设置max-age=xx(xx的单位是秒)；
2. response.setHeader('Cache-Control','max-age=30')
   意为在这个文件加载后，如果用户再次刷新页面，由于设置了response.setHeader('Cache-Control','max-age=30')，那么在30s内，客户端不再向服务器发请求下载这个文件，而是会从内存里读取；若30s过后再刷新页面，又会重新发请求下载这个文件，并再次延续30s缓存，如此往复。
3. 一般，首页或html文件不要加Cache-Control；
4. 如何更新缓存呢？
   一般网页的文件设置的缓存事件都会很长（一年更甚者十年），那么服务器上文件更新了的话，浏览器上的文件如何更新呢？
   可以注意到当浏览器以相同的URL去刷新页面时，就会调取缓存，那么就变动一下入口文件的URL，它就不会去调取缓存了；例如：
   
   
   在文件后面加个?v=x，每次更新后只需把v改变一下即可；也有用随机数来改变的；

五、 Expires

1. 它也是来设置缓存时间的，不过现在都不怎么用它，都用Cache-Control；
2. 它与Cache-Control的区别：Cache-Control是设置时间长度；
   Expires是设置时间点；
3. Expires的一个缺点是它的时间是参照电脑本地时间的，如果本地时间错乱的话，那么缓存可能就会失效；所以如果既有Expires又有Cache-Control，那么就忽略掉Expires。

六、Etag

• 结合MD5（摘要算法，把一个文件算出一个字符串，文件有一丁点变化，那么下次算出的MD5值就会改变），给文件设置响应头('Etag', MD5值)，第二次再去请求时，会带上一个请求头，请求头的值就是上次返回的MD5值（if-none-match:上次的MD5值），后台把请求的if-none-match的值跟Etag的值作比较，相同则返回304（not modified）未修改，响应体中不下载任何内容；
• cache-control与Etag的区别：
  ①cache-control不发请求；
  ②Etag有请求有响应，但是响应体是空的，不去下载内容；