初探IndexedDB

背景

隨着前端技術突飛猛進地快速發展，web應用功能和體驗也逐漸發展到能夠和原生應用媲美的程度，前端緩存技術的應用對這起到了不可磨滅的貢獻，所以想一探前端的緩存技術，這篇文章主要會介紹在平常開發中比較少接觸的IndexedDB

IndexedDB

什麼是IndexedDB

IndexedDB簡單理解就是前端數據庫，提供了一種在用戶瀏覽器中持久存儲數據的方法，可是和前端關係型數據不一樣的是，IndexedDB採用的key-value鍵值對存儲，這種存儲形式的數據庫查詢更簡單快速，IndexedDB分別爲同步和異步訪問提供了單獨的API，可是同步API僅提供在web worker內部使用，所以絕大多數狀況，咱們使用的都是異步API，同時IndexedDB也沒法突破同源策略的限制，只能訪問在同域下的數據

爲何要用IndexedDB

提到爲何要用IndexedDB就不得不提到咱們常常用的緩存API localStorage和sessionStorage，這兩個緩存API能知足咱們開發時的絕大多數需求，簡單的鍵值存儲，可是它們有它們的限制：

• 存儲空間限制，只有5M
• 只能存儲字符串，存儲對象類型的數據要用JSON.stringify和parse兩個方法轉換
• 存儲的字段一多就很難管理，存儲的字段也沒法產生關聯

IndexedDB的存儲空間是沒有限制，可是不一樣瀏覽器可能會對IndexedDB中單個庫的大小進行必定的限制，IndexedDB本質上仍是一個數據庫，能夠存儲大量結構化數據（包括文件/blobs）,同時IndexedDB API經過索引的方式實現了數據的高性能搜索

怎麼用IndexedDB

前面介紹一堆IndexedDB相關的內容，接下來就來看看具體IndexedDB具體怎麼使用，以一個簡單的例子來切入，下面直接上具體代碼：

var data = [{
  id: 1,
  name: 'Tom',
  age: '18'  
}, {
  id: 2,  
  name: 'Tommy',
  age: '16'
}]  
// 打開數據庫，兩個參數（數據庫名字，版本號），若是數據庫不存在則建立一個新的庫
var request = window.indexedDB.open('myDatabase', '1')
// 數據庫操做過程當中出錯，則錯誤回調被觸發
request.onerror = (event) => {
  console.log(event)
}
// 數據庫操做一切正常，全部操做後觸發
request.onsuccess = (event) => {
  var db = event.target.result
  // 數據讀取
  var usersObjectStore = db.transaction('users').objectStore('users')
  var userRequest = usersObjectStore.get(1)
  userRequest.onsuccess = function (event) {
    console.log(event.target.result)
  }
}
// 建立一個新的數據庫或者修改數據庫版本號時觸發
request.onupgradeneeded = (event) => {
  var db = event.target.result
  // 建立對象倉庫用來存儲數據，把id做爲keyPath，keyPath必須保證不重複，至關於數據庫的主鍵
  var objectStore = db.createObjectStore('users', { keyPath: 'id'})
  // 創建索引，name和age可能重複，所以unique設置爲false
  objectStore.createIndex('name', 'name', {unique: false})
  objectStore.createIndex('age', 'age', {unique: false})
  // 確保在插入數據前對象倉庫已經創建
  objectStore.transaction.oncomplete = () => {
    // 將數據保存到數據倉庫
    var usersObjectStore = db.transaction('users', 'readwrite').objectStore('users')
    data.forEach(data => {
      usersObjectStore.add(data)
    })
  }
}
複製代碼

上面的例子介紹了IndexedDB的簡單用法，當執行完上面的代碼後能夠在瀏覽器中看到本身新建的IndexedDB:

考慮到不是全部人都會將IndexedDB應用於實際工做，所以上面只是介紹了簡單API的調用，更多關於IndexedDB的用法能夠去 MDN學習，真正須要使用的時候，對於其異步API調用若是不作必定的封裝，必定會陷入深深的回調地獄，所以這裏推薦兩個IndexedDB API的封裝庫:

• Dexie.js
• localForage

應用場景

相信這個話題應該是大部分人最感興趣的，IndexedDB到底應用在什麼地方？前面介紹了這麼多，IndexedDB使用比localStorage、sessionStorage複雜得多，若是沒有特定的使用場景，開發者必定不會本身給本身找麻煩選擇IndexedDB作緩存，結下就來看看IndexedDB適用的場景：

• 不須要網絡鏈接的純離線應用，好比Todolist這類的用來記錄待辦任務類型的應用，

  

  在不考慮須要聯網的登陸、分享功能下，待辦事項、收件箱、任務核心功能徹底能夠用IndexedDB作數據庫存儲，配合Electron作一個桌面應用

• 須要存儲大量數據的應用，好比圖書管理系統這類的須要存儲大量數據的應用，徹底能夠將圖書信息存儲在IndexedDB中

• 配和service worker構建pwa應用，用來緩存網絡請求

總結

這篇文章簡單介紹了IndexedDB的相關內容，總的來講，IndexedDB的應用頻率並不高，這是因爲IndexedDB適用複雜度和很少的適用場景決定的，所以這裏也只是對它作了簡單介紹，但願看了這篇文章後，能對IndexedDB有個簡單的瞭解，在須要使用的時候能有個印象。若是有錯誤或不嚴謹的地方，歡迎批評指正，若是喜歡，歡迎點贊