Cookie-Session-LocalStorage-Sess

Cookie

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

Session

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

LocalStorage

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

SessionStorage

1.SessionStorage跟HTTP无关
2.HTTP不会带上SessionStorage的值
3.只有相同域名的页面才能互相读取SessionStorage（没同源那么严格）
4.每个域名SessionStorage最大储存量为5Mb左右（每个浏览器不一样）
5.SessionStorage在用户关闭页面（会话结束）后就失效

• 请问cookie和session什么关系？
  一般来说session是基于cookie实现的，因为session必须将sessionId放到cookie里，然后再发给客户端，没有sessionId就没session（反过来说cookie是session的基石）

• 请问cookie和localStorage的区别是什么？
  最大的区别的cookie每次请求的时候都会带到服务器上去，localStorage的时候不会带到服务器上去（因为跟http无关）。
  cookie一般是4k，localStorage一般是5M

• 请问localStorage和sessionStorage（会话存储）有什么区别？
  前四点一样，但是sessionStorage在用户关闭页面（会话结束）后就失效了

如何处理HTTP缓存

1.cache-control
response.setHeader('Cache-Control','max-age=30')通过设置Cache-Control以后，30秒内，浏览器就不会再次请求了。（一般都是设置一年以上的Cache-Control）
原理是Chrome在30s内请求同样的url，那么Chrome就会阻断这个请求，所以Chrome直接在它的内存里面返回上一次的main.js，那个请求没有发请求。过了30s请求main.js,浏览器会说这次给你个新的，再保存30s，重复上面的过程。
2.Expires
response.setHeader('Expires','Wed, 21 Oct 2015 07:28:00 GMT')
这个是到指定时间过期，而cache-control是过了多久过期。Expires有个缺点：它是使用的是本地时间，如果用户修改电脑的时间，那么Expires就不起作用了，不推荐。所有还是使用cache-control比较好。

如何更新缓存

更改URL

在入口处（HTML文件里面 ）把URL变一下，跟以前的URL不一样，那么就不会使用缓存，浏览器就会到最新版。
比如在index.html入口文件里的link标签和script标签的地址名字改掉，
<link rel="stylesheet" href="./css/default.css">改成<link rel="stylesheet" href="./css/default.css?v=3">。<script src="./js/main.js"></script>改成<script src="./js/main.js?v=2"></script>。以后需要在变更代码只需要把URL修改即可。