前言：我们来谈谈什么是缓存？我们为什么需要缓存呢？

缓存就是数据交换的缓冲区（称作Cache），是存贮数据（使用频繁的数据）的临时地方。当用户查询数据，首先在缓存中寻找，如果找到了则直接执行。如果找不到，则去数据库中查找。 缓存的本质就是用空间换时间，牺牲数据的实时性，以服务器内存中的数据暂时代替从数据库读取最新的数据，减少数据库IO，减轻服务器压力，减少网络延迟，加快页面打开速度。

前端缓存分类

前端缓存主要分为：

• HTTP缓存
• 浏览器缓存

http缓存

• HTTP请求传输时用到的缓存，主要在服务器代码上设置

浏览器缓存

• 浏览器缓存则主要由前端开发在前端JavaScript上进行设置,对于我们的前端伙伴们，重点了解浏览器缓存就可以啦！

使用缓存的优势

正常来说，进行一个数据请求，可以分为发起网络请求、后端处理、浏览器响应三个步骤。而浏览器缓存可以帮助我们在第一和第三步骤中优化性能。 比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。同时由于缓存文件可进行重复利用，极大程度降低服务器压力。所以说缓存是性能优化中简单高效的一种优化方式了。

缓存的过程分析

我们简单的来看一个网络请求的图片

通过上图，我们不难看出，当浏览器第一次请求，首先会先查找缓存，若查找不到才发起http请求，并且在请求结束之后。我们可将请求结果存储在浏览器中，便于下次直接使用缓存数据

那么浏览器本地缓存到底有哪些呢？有什么区别呢？

• cookie
• localStorage
• sessionStorage

1、存储大小不同

cookie主要用于存储用户信息，存储空间小，只有4Kb localStorage、sessionStorage存储空间较大，目前可以达到5M及以上

2、生命周期（缓存存活的最大时间）

cookie:会设置一个expires（max-age）则cookie会在指定的时间失效，若没有设置结束时间，则默认为session,关闭浏览器则失效 localStorage:数据会永久存在，除非后期手动进行清除 sessionStorage:仅存在于会话期间，浏览器关闭则缓存失效

3、服务器通讯

cookie:对服务器发起http请求时,每次都会将数据携带在http请求中，过多保存cookie则带来性能问题,占用带宽 localStorage和sessionStorage：数据不是由每个服务器请求传递，而是只有在请求时使用数据，而不参与服务器的通讯

4、操作方法

cookie的操作方法较为复杂，需要单独封装setCookie、getCookie等方式设置与读取缓存 localStorage和sessionStorage采用的是统一API进行操作，操作方法如下

getItem(key)获取缓存
setItem(key,value)设置修改缓存
removeItem(key)移除单个缓存
clear()清空所有缓存

经过对比，我们不难发现localStorage和sessionStorage相对cookie要优秀许多

举个栗子：

在注册登录模块中，我们点击登录按钮后请求后端接口，后端验证账号后一般会返回用户相关信息，例如用户名或者token等类型数据，而此类数据需要在项目中多个页面使用。若每次都去发起http请求，肯定会增加服务器压力，那么最好的方法则是将其通过缓存保存下来，使用时直接通过浏览器获取

我们通过以下代码进行登录,当登录成功后将返回的token采用sessionStorage进行存储

loginDom.addEventListener('click', function () {
    //非空验证
    if (!(telDom.value && pwdDom.value)) {
      common.toast('输入的内容不能为空', false);
      return;
    }
    let postData = {
      account: telDom.value,
      password: pwdDom.value
    }

    // 调用登录接口
    axios.post('/api/user/login', postData).then(function (res) {
      // 判断登录是否成功
      if (res.data.errno == 0) {
        common.toast('登录成功', true);

        // 将token写入缓存
        sessionStorage.setItem('token', res.data.data.token);
        location.href = './index.html'
      } else {
        common.toast(res.data.message, false);
        telDom.value = '';
        pwdDom.value = '';
      }
    })

在浏览器控制台Application中即可查看缓存是否存入

而在后续需要使用的地方，则通过getItem获取即可

if (sessionStorage.getItem('token')) {
  //获取出存入的缓存
  let token = sessionStorage.getItem('token');
  axios.defaults.headers.common['Authorization'] = 'Bearer '+token;
}