初探IndexedDB

william_li發表於2019-04-27
Index

背景

隨著前端技術日新月異地快速發展，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
考慮到不是所有人都會將IndexedDB應用於實際工作，因此上面只是介紹了簡單API的呼叫，更多關於IndexedDB的用法可以去MDN學習，真正需要使用的時候，對於其非同步API呼叫如果不做一定的封裝，一定會陷入深深的回撥地獄，因此這裡推薦兩個IndexedDB API的封裝庫:

應用場景

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

  • 不需要網路連線的純離線應用，比如Todolist這類的用來記錄待辦任務型別的應用，

    初探IndexedDB
    在不考慮需要聯網的登入、分享功能下，待辦事項、收件箱、任務核心功能完全可以用IndexedDB做資料庫儲存，配合Electron做一個桌面應用

  • 需要儲存大量資料的應用，比如圖書管理系統這類的需要儲存大量資料的應用，完全可以將圖書資訊儲存在IndexedDB中

  • 配和service worker構建pwa應用，用來快取網路請求

總結

這篇文章簡單介紹了IndexedDB的相關內容，總的來說，IndexedDB的應用頻率並不高，這是由於IndexedDB適用複雜度和不多的適用場景決定的，因此這裡也只是對它做了簡單介紹，希望看了這篇文章後，能對IndexedDB有個簡單的瞭解，在需要使用的時候能有個印象。如果有錯誤或不嚴謹的地方，歡迎批評指正，如果喜歡，歡迎點贊

相關文章