Session, LocalStorage ,Cache-Control

Session

服务器经过 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要更优，由于它直接就不请求了