了解 Session、LocatStorage、Cache-Control、ETag

• cookie 与 session 有什么区别？

1. 由于 HTTP 协议是无状态的协议，所以服务端需要记录用户的状态时，就需要用某种机制来识具体的用户，这个机制就是 Session. 典型的场景比如购物车，当你点击下单按钮时，由于 HTTP 协议无状态，所以并不知道是哪个用户操作的，所以服务端要为特定的用户创建了特定的 Session，用用于标识这个用户，并且跟踪用户，这样才知道购物车里面有几本书。这个 Session 是保存在服务端的，有一个唯一标识。在服务端保存 Session 的方法很多，内存、数据库、文件都有。集群的时候也要考虑 Session 的转移，在大型的网站，一般会有专门的 Session 服务器集群，用来保存用户会话，这个时候 Session 信息都是放在内存的，使用一些缓存服务比如 Memcached 之类的来放 Session。

1. 思考一下服务端如何识别特定的客户？这个时候 Cookie 就登场了。每次 HTTP 请求的时候，客户端都会发送相应的 Cookie 信息到服务端。实际上大多数的应用都是用 Cookie 来实现 Session 跟踪的，第一次创建 Session 的时候，服务端会在 HTTP 协议中告诉客户端，需要在 Cookie 里面记录一个 Session ID，以后每次请求把这个会话 ID 发送到服务器，我就知道你是谁了。有人问，如果客户端的浏览器禁用了 Cookie 怎么办？一般这种情况下，会使用一种叫做 URL 重写的技术来进行会话跟踪，即每次 HTTP 交互，URL 后面都会被附加上一个诸如 sid=xxxxx 这样的参数，服务端据此来识别用户。

1. Cookie 其实还可以用在一些方便用户的场景下，设想你某次登陆过一个网站，下次登录的时候不想再次输入账号了，怎么办？这个信息可以写到 Cookie 里面，访问网站的时候，网站页面的脚本可以读取这个信息，就自动帮你把用户名给填了，能够方便一下用户。这也是 Cookie 名称的由来，给用户的一点甜头。所以，总结一下：Session 是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中；Cookie 是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现 Session 的一种方式。

• 什么是 session？

服务器通过 cookie 给用户一个 sessionID，

sessionID 对应服务器里的一小块内存，

每次用户访问服务器的时候，服务器就通过 sessionID 去读取对应的 session，来知道用户的隐私信息

面试的时候怎么回答 cookie 和 session 的特点：

• localStorage 是什么？

是 html5 技术提供的一个 API，

session 是服务器上的哈希表

localStorage 的实质就是一个哈希表，是浏览器上的哈希表

`localStorage.setItem ()` 接受两个参数，可以存一个 key、value，只能以字符串的形式存

如果要存一个对象，可以用 JSON.stringify 进行转化

`localStorage.getItem ()` 可以获取值，只接受一个 name

`localStorage.clear ()` 不接受参数，清空 key、value

都是用来操作当前页面里面的哈希表

localStorage 不存在与页面里，它存在 C 盘的一个文件里

session 的缺点就是占内存

应用：

场景：页面更新，提示用户，但是只提醒一次，用户二次进入（刷新）的时候不需要提示

localStroage 与 sessionStroage 的区别

sessionStroage 与 session 没有关系

• session 与 Cookie 什么关系

一般来说 session 是基于 Cookie 实现的，反过来说 cookie 是 session 的基石

以为 session 必须把 sessionID 放进 cookie 里再发送给客户端

session 大部分时间是基于 Cookie 来存储 ID 的，但是它也可以通过查询参数和 localStroage 来存储它的 ID

• localStroage 与 Cookie 的区别

cookie 每次会带给服务器，localStroage 不会带给服务器，它与 HTTP 无关

cookie 最大 4k，loaclStroage5MB 左右

• 了解 Cache-Control

HTTP 缓存，web 优化（常识）

将某文件缓存至本地

`response.setHeather (‘Cache-Control’,'max-age=30')` 将文件在本地保留 30s，刷新不会请求，30s 后刷新重新请求，一般 `max-age` 要设置久一点例如十年！300000000（阔怕！）

但是，浏览器觉得你存那么久也没啥用，一般一年以后就帮你清了

你问有什么后果吗？

没有！反正也没 bug，也就是加载可能慢一点点而已

首页不会使用使用 cache-contorl

如果要升级 css 或 js 就在后面加上一个查询参数

如 `https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js`

更新后：`https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js?v=2` 这样的话 `max-age=30'` 就会失效

- Expires 和 Cache-Control 有什么区别

Expires 设置的是时间点

Cache-Control 设置的是时间长度

如果同时设置有限使用 Cache-Control

Cache-Control 是升级后才有的，10 几年前都是用 Expires 控制缓存

`Expires: Wed, 21 Oct 2015 07:28:00 GMT` 因为他用的本地时间，如果时间错乱了，那你就完了

• 了解 MD5 （讯息摘要算法）

一种被广泛使用的密码杂凑函数，可以产生出一个 128 位元的散列值（hash value），用于确保信息传输完整一致

举个栗子：

假如你在网上下载了一个软件，有 300M，然而你不知道你下载的是不是和它的 300M 一样

这时就需要有个 MD5，如果你们两个的 MD5 值一样，那么说明你下载的 300M=== 它的 300M

文件差异越小，MD5 的差异越大

• 了解 ETag

用 cache-Control 是不请求，ETage 是直接不下载，但还是有请求，但是响应体是空的

打开一个网页，初次打开会有一个 ETag，

以后再打开它的时候请求里有一个 if-none-match 响应头，后面跟的就是 MD5

源码附件已经打包好上传到百度云了，大家自行下载即可～

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27提取码: yu27

百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～

开源地址

码云地址：http://github.crmeb.net/u/defu

Github 地址：http://github.crmeb.net/u/defu