背景
隨着前端技術日新月異地快速發展,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有個簡單的瞭解,在需要使用的時候能有個印象。如果有錯誤或不嚴謹的地方,歡迎批評指正,如果喜歡,歡迎點贊