客戶端緩存（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>

複製代碼