背景

隨著前端技術日新月異地快速發展，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的封裝庫:

應用場景

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

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

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

需要存儲大量數據的應用，比如圖書管理系統這類的需要存儲大量數據的應用，完全可以將圖書信息存儲在IndexedDB中

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

總結

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

總結

以上是生活随笔為你收集整理的java indexeddb_初探IndexedDB的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。