Session、LocalStorage、Cache-Control

本次主要介绍一些 Session 、 LocalStroage 、 Cache-Control 相关知识并与上篇博客 Cookie 做一些对比说明。

一、Session

1、什么是 Session

说到 Session 一定要介绍一下 Cookie ，Cookie 是如何生成的：

• 服务器通过 HTTP 相应头的 Set-Cookie 给客户端一段字符串，
• 客户端每次访问相同域名的网页时都会自动带上这段 Cookie 值
• 并且，这段 Cookie 值会在客户端保存一定的时间
• Cookie 的大小一般为 4KB
• Cookie 的默认失效时间为用户关闭浏览器就失效了，但是服务器端可以 Cookie 的失效时间

Cookie 的本质其实就是 HTTP 请求的响应头的一部分。

介绍下 Session ：
Session 的出现出于对 Cookie 信息的安全性处理，如果 Cookie 值带上的用户的邮箱、账号、余额等隐私信息，那么在 Web 端是很容易被盗用或者篡改，此时 Session 出现， Session 是服务器端存在内存中的一段 hash 值，并且是通过随机数随机生成的，这个随机数对应的是某一个用户的用户信息，那么每次在客户端发起请求带来的 Session 值，就可以在服务端根据此值去找到对应的用户信息数据。具体的流程如下：

• 将 SessionId(随机数) 通过 Cookie 发送给客户端
• 客户端访问服务器时，会带上 Cookie 值，也就是服务端生成的 SessionId(随机数) ，服务器读取 SessionId
• 服务器中的一块内存（ hash 表 ）保存了所有的 session
• 通过 SessionId 可以得到对应用户的隐私信息，如 id 、email
• 这块内存表( hash 表 )就是服务器上的所有 Session

当然，如果服务器停止或者重启的话，这块内存表也会被清空。显然，Cookie 是不占用内存的，而 Session 是占用内存的。

二、LocalStorage

LocalStorage 是 Html5 提供的 API 。在浏览器控制台输入 localstorage 会打印出 LocalStorage 提供的所有 API 。如图所示：

以上 API 中 ，setItem()、getItem()、removeItem() 比较常用。 LocalStorage 的实质是一个 hash 表。使用方法如下：

需要说明的是，localStorage 会将所有的值转换成字符串存入进入，比如一个 object 转换成字符串就变成了 [Object Object]，所以对于复杂类型，在存入时最好使用 JSON.stringify() 先转换成 JSON 字符串再存入 localStroage 。

LocalStorage 的特点：

• Localstorage 与 HTTP 无关
• HTTP 不会带上 LocalStorage 的值
• 只有域名相同的页面才能相互读取 LocalStorage(没有同源那么严格)
• 每个域名 LocalStorage 最大存储量为 5M ，不同浏览器会有不同
• 常用场景：记录有没有提示过用户（没有用的信息，不能记录密码）
• LocalStorage 永久有效，除非用户清理

通常我们也会经常看到 SessionStorage ，二者的用法一致，唯一的区别是 SessionStorage 在用户关闭浏览器的时候自动清空，而 LocalStorage 则需要用户手动清理或者通过 JS 的 removeItem() 才能删除。

至此，面试经常会问到的关于 Cookie 、 Session 、 LocalStorage 大专栏  Session、LocalStorage、Cache-Control、 SessionStorage 的面试问题总结：

• Cookie 和 Session 是什么关系（参考标题一且 Session 是基于 Cookie 实现的）
• Cookie 和 LocalStorage 有什么区别
• LocalStorage 和 SessionStorage 有什么区别

三、Cache-Control

Cache-Control 也是可以在请求的响应头中进行设置，代码如下：

这样做能够加快页面打开速度，算是前端性能优化的一种。对于 Chrome 浏览器，是不允许对首页进行缓存设置的。

如何更新缓存？通常情况下，通过 setHeader 可以设置很长的失效期，但是在请求 css 或者 js 时只要路径有变化，都会重新请求，可以在引入 css 和 js 的地方加一个时间戳(不建议) 或者一个版本号（./css/base.css?v=1），通过改变查询参数就可以是客户端代码更新。

四、Expires

Expires 实现的功能和 Cache-Control 一样，但是 Cache-Control 是新的相应头，如果设置了 Cache-Control 那么就会忽略 Expires 的设置。代码如下：

与 Cache-Control的不同在于 Cache-Control 是设置过多少秒后过期，而 Expires 是设置什么时候过期。

五、ETag

在介绍 ETag 之前需要先介绍下 MD5 。MD5 是典型应用是对一段信息（Message）产生信息摘要（Message-Digest），以防止被篡改。简单的说，比如现在有一个文本 1.txt ，文本内容为 123455 ，1.txt 的 md5 值为一段数字+字母的字符串，现复制 1.txt 到 2.txt ，那么 2.txt 的 md5 值与 1.txt 的 md5 值相同。如果修改其中一个文件内容，则修改的文件的 md5 值则会发生变化。简要的说，md5 能够用来校验文件是否相同。

1、使用 md5

在终端输入:npm install md5-node，然后在 server.js 中引入 const md5 = require('md5-node')

2、md5 与 ETag

ETag 和 Cache-Control 的区别：
ETag 会发送请求，但是响应体是空； Cache-Control 则不会发送请求，直接读取本地文件。