一、写在前面

浏览器缓存是性能优化的一个非常重要指标，同时也是面试官最常询问的问题之一，而前端缓存也是在我们开发中必不可少的模块，下面我们就直接开始介绍浏览器缓存即本地缓缓的使用、用户操作对缓存的影响以及缓存数据的查看～

二、使用介绍

一张图简单囊括缓存的基本信息～

2.1 浏览器缓存

1 缓存流程

通常来说，浏览器首次加载资源会返回200，并且下载服务器文件，缓存资源及版本号，再次加载资源的时候就可根据资源请求头字段（下方强缓存&协商缓存）去判断是否使用缓存资源。HTTP Cache 是我们开发中接触最多的缓存，它分为强缓存和协商缓存。

1. 强缓存：直接从本地副本比对读取请求头，不去请求服务器，返回的状态码是 200。
2. 协商缓存：会去服务器比对，若没改变才直接读取本地缓存，返回的状态码是 304。

2 强缓存(expires\Cache-Control)：

定义: 强缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程

强缓存是利用http的返回头中的Expires或者Cache-Control两个字段来控制的，用来表示资源的缓存时间。

expires字段：这是 HTTP 1.0 的字段，表示缓存到期时间，是一个绝对的时间 (当前时间+缓存时间), 当客户端和服务器时间不一时，会有点问题。

Cache-Control字段：HTTP1.1新增字段,它是一个相对时间，主要是利用该字段的max-age值来进行判断，例如Cache-Control:max-age=3600，代表着资源的有效期是3600秒。

下面几个比较常用的设置值：

• no-cache：不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。
• no-store：直接禁止游览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。
• public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。
• private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。
• 优先级: cache-control -> expires

Cache-Control:max-age=3600 // 资源的有效期是3600秒
Cache-Control: no-cache // 直接协商缓存询问服务器
Cache-Control: no-store // 直接请求资源，不做协商缓存对比

3 协商缓存(Last-Modified & If-Modified-Since\Etag & If-None-Match)：

定义: 协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程

协商缓存是发起http的请求携带Etag或者Last-Modified两个字段，由服务器做对比确定缓存资源是否可用。

• 服务器通过 Last-Modified 字段告知客户端，资源最后一次被修改的时间,客户端会自己对这个时间进行比对, 如果相等则表示未修改，响应 304；反之，则表示修改了，响应 200 状态码，并返回数据(如果资源更新的速度是秒以下单位,这个缓存就会失效,因为时间单位是秒)

• Etag 存储的是文件的特殊标识(一般都是 hash 生成的)，服务器存储着文件的 Etag 字段,之后的流程和 Last-Modified 一致

• Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。
  优先级: ETag -> Last-Modified

为什么使用ETag
某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，if-modified-since能检查到的粒度是秒级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；

熟悉完强缓存和协商缓存,下面两张图带你更加深刻理解

2.2 本地缓存

Cookie：

• 用于解决http无状态的缺点，在客户端存储会话信息，记录用户的状态
• 使用cookie在客户端存储一些其它的数据，可以设置使用范围、增删改查作用

//增改：
Cookies.set("token", res1.data.result.token, {
	expires: 7,
	path: "/",
	domain: "101hr.com"
});
//删除对应项
Cookies.remove("token", { path: "/", domain: "101hr.com" });
//查
Cookies.get("menuClick")

sessionStorage、localStorage：

• 是一种在客户端存储数据的一种机制，主要的目的是为了克服由cookie带来的一些限制
• 当数据需要被严格控制在客户端上时，无须将数据在客户端和服务器之间来回的进行传送，并且可以存储大量的跨会话的数据
• Web Storage包含了两种对象的定义，sessionStorage和localStorage
• sessionStorage只能存储字符串类型数据，无法直接存储数组类型和JSON对象
• 所以可以JSON.stringify()方法转换成字符串，再存储到sessionstorage中,使用的时候再使用JSON.parse()转化回来

//sessionStorage和localStorage的使用方式是相近的
//增改
localStorage.setItem('redirect_uri',res.data.result.redirect_uri)
//存储数组和对象类型
localStorage.setItem('redirect_uri',JSON.stringify(res.data.result.redirect_uri))
sessionStorage.setItem('redirect_uri',res.data.result.redirect_uri) 
//查
localStorage.getItem('redirect_uri’)
JSON.parse(localStorage.getItem('redirect_uri’))
//删
localStorage.removeItem('redirect_uri’)
//清空storage数据
localStorage.clear() 

vuex：

• vuex是一个专为vue.js应用程序开发的状态管理器
• 它采用集中式存储管理应用的所有组件的状态，并且以相 应的规则保证状态以一种可以预测的方式发生变化,采用单向数据流的方式更加快的定位到位置
• 数据保存在Vuex的state字段内,任何页面组件都可以通过$store.state.变量名称去读取数据
• 修改state数据，显示地提交mutations，使用this.$store.commit方法来执行mutations
• 页面刷新数据恢复,故结合keep-alive、web Storage来使用

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  name: 'yan',
  age: 23,
  obj: [{ bookname: '荒诞', num: 20 }, { bookname: '行为学', num: 30 }, { bookname: '荒诞行为学', num: 40 }]

}

const mutations = {
  changename (state, name) {
    state.name = name
  },
  changeage (state) {
    state.age++
  }
}

const getters = {
  checkObj (state) {
    return state.obj.filter(res => { return res.num > 25 })
  }

}

// 异步触发

const actions = {
  changeage (context) {
    context.commit('changeage')
  }

}

const store = new Vuex.Store({
  //  vuex的配置
  state, mutations, getters, actions
})

//使用文件

changName () {
      // vuex通过commit提交修改
      this.$store.commit('changename', 'yanjiazhen')
      this.$store.commit('changeage')
      // getter获取计算内容
      this.obj = this.$store.getters.checkObj
} 

想要更加深入学习vuex可以查看这篇文章

https://blog.csdn.net/weixin_44258964/article/details/105853865

三、其他

3.1 用户操作对缓存、数据存储的影响

3.2 数据保存查看

一张图查看http缓存数据以及具体位置

1. http缓存的是保存在本地【下面有图可以查看】

   • 其中主要是disk cache、memory cache，以及不常用Service Worker、Push Cache缓存
   • disk cache（硬盘缓存），持久存储的，是实际存在于文件系统中的。而且它允许相同的资源在跨会话，通常存储数据较大，但是读取速度相对比较慢
   • memory cache（内存缓存），持续性短，一旦关闭浏览器页面，缓存就会被释放，通常存储数据较小，但是读取数组较快，有些资源设置了<link rel=preload>就会将资源提前下载至内存缓存，不受HTTP缓存头如max-age、no-cache等的影响，即使不设置缓存，资源也可能被缓存下来‌
   • Service Worker（不常用） 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。传输协议必须为 HTTPS，而且缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。
   • Push Cache（不常用）（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。

2. 本地缓存

   • cookie数据始终在同源的http请求中携带（即使不需要），即cookie可在浏览器和服务器间来回传递

   • sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存

   • vuex保存在内存中

3.3 缓存作用

• 通过缓存，使用资源副本，大大减少获取资源时间，提升用户体验能够减少网络带宽消耗

• 减少请求时间，减少http请求个数，可以大幅度的降低网络请求，减少流量的消耗

• 减少了冗余的数据传输，节省了网费，减少了服务器的负担，大大提升了网站的性能

• 减少延迟与网络阻塞，同时降低服务器压力，提高服务器性能

• 业务流程需要,简化用户操作,提升用户体验