Cookie，Session，LocalStorage，Cach

Cookie

在上一篇博客中已经介绍过了，详细可以参考：https://www.jianshu.com/p/96cbf488d5fc，这里对Cookie做一下简要的介绍：

1. 服务器通过 Set-Cookie 头给客户端一串字符串；

2. 客户端（浏览器）每次访问相同域名的网页时，必须带上这段字符串；

3. 客户端（浏览器）要在一段时间内保存这个Cookie；

4. Cookie 默认在用户关闭页面后就失效，后台代码可以任意设置 Cookie 的过期时间（具体的下文进行介绍）；

5. 大小大概在 4kb 以内。

Session

Session是在Cookie的基础之上实现的，当用户从一个页面换到另一个页面的时候，需要将Cookie记录的当前页面的一些内容也发送给下一个页面，这个时候就通过Session设置一个随机的数来代替需要记忆的内容，当跳转到指定的页面之后，就通过Session得到的这个随机数进行读取这个随机数所代表的那部分用户信息。这样做的好处就是能够实现用对用户信息进行保密，并且能够提高传输信息的速度。比如：（Node.js）

let sessions = {}

let sessionId = Math.random()*100000

sessions[sessionId] = {sign_in_email: email}

response.setHeader('Set-Cookie',`sessionId=${sessionId}`)

response.statusCode = 200

以上的代码实现的是创建一个随机的sessionId，将这个sessionId放到一个空对象中，并且代表了一个用户的邮箱，在访问这个页面的时候，服务器就会给客户端设置一个Cookie的响应头，这个响应头的内容就是sessionId的值。

let hash = {}

    for(i=0;i<cookies.length;i++){

      let parts = cookies[i].split('=')

      let key = parts[0]

      let value = parts[1]

      hash[key] = value

    }

    let mySession = sessions[hash.sessionId]

    console.log(mySession)

    let email

    if(mySession){

      email = mySession.sign_in_email

    }

在跳转到的那个页面中通过建立一个hash列表，将上一个页面传过来的cookie值放到这个hash列表中，这个hash列表中的key就是上一个页面中的sessionId，其对应的value就是用户的邮箱信息。进而通过这个邮箱（用户名）可以获取用户的其他信息。

总结出一句话：Session是服务器中的一个hash列表，这个hash列表存储了所有用户的sessionId，在页面进行交互的时候，客户端（浏览器）就可以通过这个sessionId读取用户的其他信息。

LocalStorage

1. LocalStorage 跟 HTTP 无关（与cookie的最大区别）

2. HTTP 不会带上 LocalStorage 的值

3. 只有相同域名的页面才能互相读取 LocalStorage（没有同源那么严格）

4. 每个域名 localStorage 最大存储量为 5Mb 左右（每个浏览器不一样）

5. LocalStorage 永久有效，除非用户清理缓存

6. 常用场景：记录有没有提示过用户（没有用的信息，不能记录密码）

主要用的时候是以下的三个API

localStorage.setItem('s','1')

localStorage.getItem('s')

localStorage.clear()

在js中进行编辑如下内容：

      let already = localStorage.getItem('已经提示了')

      if(!already){

          alert('你好，我们的网站已经更新了，有如下的新功能：....')

          localStorage.setItem('已经提示了',true)

      }else{

      }

这里实现的就是在localStorage中存放一个已经提示的标签，当用户第一次进入这个页面的时候进行提示，第二次进入的时候就不进行提示了，因为这个时候浏览器通过localStorage记住了之前已经提示过的事情了。

SessionStorage（会话存储）

1、2、3、4 同上

5. SessionStorage 在用户关闭页面（会话结束）后就失效。（SessionStorage与localStorage的区别）

Cookie和localStorage之间的联系

在localStorage还没有出现之前，前端一直使用的是cookie来进行存数据的，但是cookie会将所有存储的内容都上传到网页上，不利于浏览器的快速跳转，出现卡顿的情况。（前端最好不要读/写cookie，主要用localStorage）

Cache-Control

主要是用在后台的设置中，使用Node.js进行后台设置的时候，例子如下：

  if(path === '/js/main.js'){

    let string = fs.readFileSync('./js/main.js','utf8')

response.setHeader('Content-Type', 'application/javascript;charset=utf-8')

response.setHeader('Cache-Control', 'max-age=30')

   response.write(string)

   response.end()

  }

用在这里主要实现的功能就是第一次读取文件的时候是从硬盘上读取的，在30秒之内在此访问这个页面（刷新页面）的时候，直接通过缓存进行读取，不是从硬盘上进行下载了，就能进行提速。主要就是设置缓存。（如果所有的东西都是缓存，就存在一个风险，所有的东西都不是新的）Chrome浏览器是不允许对首页进行设置缓存的。

一般的缓存都会保存10年，但是当需要对缓存的CSS或者JS进行更新的时候就直接改变URL就行了。比如此处：

<link rel="stylesheet" href="./css/default.css">

<script src="./js/main.js"></script>

改变为下面：

<link rel="stylesheet" href="./css/default.css?v=2">

<script src="./js/main.js?v=2"></script>

加粗部分为改动的部分，只要这一部分改变了，那么浏览器就会从新下载已经更新过的css和js了，当需要再做进一步的改动的时候将v的值改变就行了。

这样既能缓存10年，又能随时的更新。但就算自己设置了10年的缓存，浏览器一般会在1年的时间就将缓存清空了。清空了在加载的时候就会从新下载资源。

Cookie 如何设置过期时间？

方式1：

Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>

这时使用的是Expires，指定失效的具体时间点，这里需要设置符合HTTP协议的Date时间

比如在Node.js中

response.setHeader('Set-Cookie','1@.com;Expires=Wed, 21 Oct 2019 07:28:00 GMT')

方式2：

Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>

这时使用的是Max-Age，指定时间长度，过了这时间之后就失效了，时间的值以秒为单位。

比如：

response.setHeader('Set-Cookie','1@.com;Max-Age=5')

如何删除 Cookie？

1.在计算机上打开Chrome。

2.点击右上角的“更多”图标 。

3.依次点击更多工具 清除浏览数据。

4.点击顶部“时间范围”旁边的下拉菜单。

5.选择一个时间段，例如过去一小时或过去一天。

6.选中“Cookie 及其他网站数据”，并取消选中所有其他项。

7.点击清除数据。

Expire

Expires是以前用来进行缓存的，现在使用的是Cache-Control，如果设置了Cache-Control，进而Expires，就会忽略Expires。

Expires主要是用来设置到什么时候过期，但是这个不可靠，因为设置的几分几秒是根据本地时间来设定的，容易出现时间混乱。而Cache-Control设置的是在一段时间内不过期，这就比较可靠。

ETag

ETag设置缓存的时候，通过MD5读取请求文件的大小，如果这一次读取到的文件的大小和上一次读取到的文件的大小不一样，那么客户端（浏览器）就会下载最新的这一次的文件，进行更新，如果两次的文件大小都一样，则客户端（浏览器）就不会下载，而使用的是之前缓存的文件。

Cache-Control直接不请求，而用ETag是不下载，但是还是会发请求。使用MD5进行计算，一旦计算出来的文件大小是一样的就不下载。