前端缓存

浏览器缓存与HTTP缓存两分天下，如下图所示：

1、浏览器缓存

sessionStroage、localStroage、cookie是常打交道的老朋友，而IndexedDB、WebSql在开发中很少使用

sessionStroage

• 用于临时保持同一窗口的数据，窗口关闭数据也将删除，sessionStroage中一般浏览器支持的是5M大小

info = {
   name: 'Tiboo',
   number: '1204914',
   guid: '00123'
}
存储值： 将对象转换为JSON字符串
localStroage.setItem('info', JSON.stringify(info));
读取值： 将JSON字符串转换为对象
let infoData = JSON.parse(localStroage.getItem('info'))

localStroage

• 本地存储，同时不受时间限制的数据存储，localStorage中一般浏览器支持的是5M大小

cookie

• 存储web页面的用户信息, 可通过设置有效期删除存储数据。

• 每个值大小不能超过4kb, 每个web站点设置的cookie 数量不能超过20个，若超过则最早期的cookie将被自动删除。

  创建cookie：

  this.setCookie('b2bPartnerId', partnerId)
   // 设置过期时间为30天
   setCookie(name, value) { 
     let Days = 30; 
     let exp = new Date(); 
     exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); 
     document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString(); 
   },
  

  读取cookie:

  let partnerId = this.getCookie('b2bPartnerId')
  getCookie(name) { 
    let arr = document.cookie.match(reg)
    let reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
    if (arr) {
      if (arr.length) {
        return unescape(arr[2]); 
      } else {
        return null; 
      }
    } else {
      return null;
    }
  }
  

  小坑tips：
  在设置完cookie值后，立即从cookie中获取值，此时可能出现拿到的值为空。因为cookie值的设置与电脑的性能是有关系的，当下cookie值可能还未设置成功。

IndexedDB

• indexedDB存储比较适合键值对较多的数据，相对需要存储多个字段的场景，使用localStorage存储，每次写入和写出都要字符串化和对象化，较为很麻烦，如果使用indexedDB会轻松很多，因为无需数据转换

WebSql

• HTML5 Web SQL Database和indexedDB都是本地数据库数据存储，Web SQL Database数据库要出来的更早
• W3C宣布舍弃Web SQL database草案，官方说法是因为无法走标准化的流程

2、HTTP缓存

客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可直接从浏览器缓存中提取而不是从原始服务器中提取资源。

强缓存

强制缓存在缓存数据未失效的情况下（即Cache-Control的max-age没有过期或者Expires的缓存时间没有过期），那么就会直接使用浏览器的缓存数据，不会再向服务器发送任何请求

设置强缓的几种方式：

1、Cache-Control
在请求头或者响应头中设置，并且可以组合使用多种指令
Cache-Control：no-store; 所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
Cache-Control: max-age=xx; 表示缓存内容将在 xxx 秒后失效
Cache-Control: no-cache; 表示不允许强缓存

2、Expires
缓存过期时间，用来指定资源到期的时间。在响应 http 请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。

其实这两者差别不大，区别就在于 Expires 是 http1.0 的产物，Cache-Control 是 http1.1 的产物，两者同时存在的话，Cache-Control 优先级高于 Expires~

疑惑点来了：
1）强缓存未过期下：如何重新获取新的资源，除了清缓存，还有其他方式可行？

协商缓存

当第一次请求时服务器返回的响应头中没有Cache-Control和Expires或者强制缓存过期还或者它的属性设置为no-cache时(即不走强缓存)，那么浏览器第二次请求就会与服务器进行协商，与服务器端对比判断资源是否进行更新。

设置协商缓存的几种方式：

1、Etag
Etag/If-None-Match :
Etag属于HTTP 1.1属性，它是由服务器（Apache或者其他工具）生成返回给前端，用来帮助服务器控制Web端的缓存验证

2、Last-Modifed
Last-Modifed/If-Modified-Since：
Last-Modifed是服务器端文件的最后修改时间

疑惑点来了：

1）协商缓存需要配合强缓存使用，如果不启用强缓存的话，协商缓存根本没有意义？能不能单独设置协商缓存?
如果Expires，Cache-Control: max-age都没有在响应头中出现，并且设置了Last-Modified时，那么浏览器默认会采用一个启发式的算法，即启发式缓存。通常会取响应头的Date_value - Last-Modified_value值的10%作为缓存时间。

具体流程图送下：