客户端缓存（http缓存和本地缓存）

http缓存

http缓存用于客户端储存一些不常常变化的静态文件（图片、css、js等）。分为强制缓存和协商缓存。

• http缓存过程

  请求 => 是否命中强缓存 => 是否命中协商缓存 => 获取资源

• http缓存流程图

1.强制缓存

• 缓存规则

  浏览器在请求某一资源时，会先获取该资源缓存的header信息，判断是否命中强缓存（cache-control和expires信息），若命中直接从缓存中获取资源信息，包括缓存header信息，本次请求就不会与服务器进行通讯。

• 缓存方案

  Expires：response header里的过时时间，浏览器再次加载资源时，若是在这个过时时间内，则命中强缓存。

  Cache-Control：当值设为max-age=300时，则表明在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。

  Cache-Control与Expires的做用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据仍是从新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，若是同时设置的话，其优先级高于Expires

  cache-control除了该字段外，还有下面几个比较经常使用的设置值：

  值能够是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age 各个消息中的指令含义以下：

  • Public指示响应可被任何缓存区缓存。

  • Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这容许服务器仅仅描述当用户的部分响应消息，此响应消息对于其余用户的请求无效。

  • no-cache指示请求或响应消息不能缓存

  • no-store用于防止重要的信息被无心的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

  • max-age指示客户机能够接收生存期不大于指定时间（以秒为单位）的响应。

  • min-fresh指示客户机能够接收响应时间小于当前时间加上指定时间的响应。

  • max-stale指示客户机能够接收超出超时期间的响应消息。若是指定max-stale消息的值，那么客户机能够接收超出超时期指定值以内的响应消息。

2.协商缓存

• 缓存规则

  若是没有命中强缓存，浏览器会发送请求到服务器，请求会携带第一次返回的有关缓存的header字段信息（Last-Modifued/If-Modified-Since和Etag/If-None-Match），由服务器根据header信息来比对结果是否协商缓存命中。若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，可是不返回资源内容，它会告知浏览器能够直接从缓存获取；不然返回最新的资源内容。

• 缓存方案

  Last-Modify/If-Modify-Since：浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间；当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存以前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存

  Etag/If-None-Match：web服务器响应请求时，告诉浏览器当前资源在服务器的惟一标识(etag)（生成规则由服务器决定）。当资源过时时（使用Cache-Control标识的max-age），发现资源具备Etag声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定是否命中协商缓存；

本地缓存

一、cookie

• 1.兼容全部的浏览器
• 2.有存储的大小限制，通常一个源（一个域下）只能存储4KB内容
• 3.cookie有过时时间(固然咱们本身能够手动设置这个时间)
• 4.杀毒软件或者浏览器的垃圾清理均可能会把cookie信息强制清除掉
• 5.在隐私或者无痕浏览模式下，是不记录cookie的
• 6.cookie不是严格的本地存储，由于要和服务器之间来回传输

二、localStorage

• 1.不兼容IE8及如下-
• 2.也有存储的大小限制，一个源下最多只能存储5MB左右
• 3.本地永久存储，只要你不手动删除，永远存储在本地（可是咱们能够基于API removeItem/clear手动清除一些本身想要删除的信息）
• 4.杀毒软件或者浏览器的垃圾清理暂时不会清除localStorage（新版本谷歌浏览器会清除localStorage等信息）
• 5.在隐私或者无痕浏览模式下，是记录localStorage的
• 6.localStorage和服务器没有半毛钱关系

三、sessionStorage

• sessionStorage 和localStorage 惟一的区别在于sessionStorage 是临时存储，只对当前回话有效，当浏览器当前标签页关闭则失效，与localStorage 拥有一样的方法。

localStorageh和sessionStorage 都只拥有大约5M的存储空间，不适用于存储大数据量数据。对于数据量较大的数据缓存，咱们应该应用本地数据库实现（indexDB）

四、indexDB

IndexedDB 具备如下特色。

• （1）键值对储存。

  IndexedDB 内部采用对象仓库（object store）存放数据。全部类型的数据均可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每个数据记录都有对应的主键，主键是独一无二的，不能有重复，不然会抛出一个错误。

• （2）异步。

  IndexedDB 操做时不会锁死浏览器，用户依然能够进行其余操做，这与 LocalStorage 造成对比，后者的操做是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

• （3）支持事务。

  IndexedDB 支持事务（transaction），这意味着一系列操做步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生以前的状态，不存在只改写一部分数据的状况。

• （4）同源限制

  IndexedDB 受到同源限制，每个数据库对应建立它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

• （5）储存空间大

  IndexedDB 的储存空间比 LocalStorage 大得多，通常来讲很多于 250MB，甚至没有上限。

• （6）支持二进制储存。

  IndexedDB 不只能够储存字符串，还能够储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

基于localforage的vue项目本地缓存数据到indexDB数据库的实例代码

<script type="text/ecmascript-6">
import localforage from 'localforage'

export default {
  data () {
    return {
      db: null,
      canIndexedDB:false
    }
  },
  mounted () {
    this.initIndexedDB()
  },
  methods: {
    async getStoreList (key) {
      let resData = []
      if ( !this.canIndexedDB){
        resData = getAllData()
      }else{
        let cache = await this.db.getItem(key)
        if (cache) {
          resData = cache
        }else{
          resData = getAllData()
        }
        console.log(resData);
      }}
    initIndexedDB () {
      this.canIndexedDB = localforage.supports(localforage.INDEXEDDB)
      if (this.canIndexedDB) {
        this.db = localforage.createInstance({
          name: 'cacheName',
          driver: localforage.INDEXEDDB
        })
        window.db = this.db
      } else {
        this.db = null
      }
    },
  },
}
</script>

复制代码