Session, LocalStorage ,Cache-Control

服务器通过 Set-Cookie给用户一个sessionId
sessionId对应服务器内的一小块内存
每次用户访问服务器的时候，服务器就听过SessionId去读取对应的session
从而知道用户的信息

sessionId的篡改就很难了，因为用户得到的只是一个随机数而已

session其实就是一块内存
复制代码

1. 为什么要使用Session？

我们在登录成功之后，后端会将用户信息存入到数据库，然后在回应里面会写入一个字段：
"Set-Cookie:'这里是用户名+密码或者其他用户信息'"

自此之后，客户端的每一次请求都会自动带上这段cookie信息
但是，会有一个问题就是，cookie有可能会被篡改，如果被篡改了的话，信息就乱了，
比如，用户只要改下cookie中的用户名，就可以以另外一个身份登录了。

复制代码

2. Session的使用？

在用户登录成功之后，服务器会在内存中写入一个sessionId，是一个随机数
然后这个sessionId 对应的就是用户的登录信息。
然后再将这个sessionId以回应信息回传给客户端，
通过Set-Cookie: sessionId('2678613863'),写入浏览器。

以后，浏览器再次请求的时候 就是带上这个sessionId给服务器，服务器通
过查看客户端带上来的cookie里面的这个sessionId
去寻找该用户的登录信息，如果找到的话，就是已经是登录成功了，如果没有找到的话
那就是没有这个用户需要注册的了
复制代码

总结Cookie与Session：

Cookie

1. 服务器通过Set-Cookie头给客户端一段字符串
2. 客户端每次访问相同域名的网页的时候，必须带上这段字符串
3. 客户端要在一段时间内保存这个Cookie
注意：前端不要写Cookie,影响性能
复制代码

Session

1. 将SessionId通过Cookie发给客户端
2. 客户端访问服务器时，服务器读取SessionId
3. 服务器中有一块内存（哈希表）保存了所有session
4. 通过SessionId我们可以得到对应用户的隐私信息，如用户名密码等
复制代码

LocalStorage

localStorage是html5提供的一个API,localStorage的实质是一个哈希

Session是服务器的哈希表

localStorage是浏览器的哈希表

localStorage只能存字符串

localStorage的值其实是存在c盘的文件里面

1. LocalStorage与Http无关
2. Http每次请求不会带上LocalStorage的值
3. 只有相同域名的页面才能互相读取LocalStorage（这个功能由浏览器完）
4. 每个域名LocalStorage最大存储量为5MB左右，每个浏览器不一样
5. LocalStorage永久有效，除非清楚
复制代码

SessionStorage

1,2,3,4同localStorage，

不同的是，SessionStorage在用户关闭页面后就失效

面试相关

1. Cookie与Session有什么关系？

一般来说，Session是基于Cookie实现的，Session依赖于Cookie将SessionId发给客户端
复制代码

2. Cookie与LocalStorage的区别？

最大的区别就是Http每次请求不会带上LocalStorage的值，但是会带上Cookie的值
复制代码

3. LocalStorage 与 SessionStorage的区别？

也可以不基于Cookie的Session

Session是基于Cookie实现的，那么有没有不基于Cookie的Session呢？

后端在用户登录之后，服务器就为它生成一个SessionId ,然后以回应的内容返回给客户端，
然后客户端每次发送请求的时候，把获取到的SessionId放在请求参数中，

复制代码

Http缓存（Cache-Control）

(上图为后端返回值)

Cache-Control: max-age=3600 意思是：3600s内不要再次请求，即缓存3600s
(大部分是设置了一年)
Cache-Control是http写入客户端的，这个可以加快页面下载速度

例子：
比如我们要请求一个main.js，客户端第一次去请求的时候，大概花了1s钟的时间，
然后服务器接受到请求之后，通过 将Cache-Control: 30 （默认单位为s），
传回给浏览器，那么在30s内，我们再刷新页面时，浏览器就会阻隔请求，
会直接从缓存中读取这个js,过了30s之后才会去重新发起请求
我们可以看到下图，第二次请求的时候只有0s，这将会极大地提升页面打开速度

如果勾选了 Disable cache 你就是不会读取缓存了，每次都会去请求资源
复制代码

注意：页面的首页最好不要设置Cache-Control: max-age=30，

为什么呢？

首页设置了缓存，用户没办法获取到最新的代码，

如果想要更新缓存的话，给js或者css的请求地址后加一个随机的查询参数，这样每次请求的url就不一样了，就可以就可以更新缓存了

如下图所示：

Exipres

如果设置了Cache-Control,那么exipres就失效了 ，
以前设置缓存用Expires现在用Cache-Control
复制代码

Cache-Control表示多久之后过期，Expires:代表什么时候过期

但是Expires表示的是本地时间，所以如果用户更改本地时间的话，那你设置的缓存很可能就无用了，不靠谱了。

Last-Modified

上一次的修改时间 Last-Modified: Thu, 26 Jul 2018 09:10:00 GMT

MD5

摘要演算法

文件差异越小，md5算出来的值得差异越大

Etag

如果浏览器发现上一次的md5与这一次传过来的Md5一致，那么就会返回一个响应头 'if-none-match=MD5(string)'

Etag与Cache-Control的区别

Cache-Control是缓存了之后，在缓存时间之内就不再请求，

然而Etag是请求了之后，发现MD5一样，就返回一个'if-none-match=MD5(string)'这个响应头，如果存在这个，就直接不下载内容（比如js或者css等）

总结一下就是用Cache-Control后直接不请求，用了Etag就不下载但是还是会下载的

Cache-Control要更优，因为它直接就不请求了