前言：我们来谈谈什么是缓存？我们为什么需要缓存呢？
缓存就是数据交换的缓冲区（称作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;
}