初學的時候寫的demo,實際工作使用LOCALFORAGE庫即可。

/* indexedDB:講道理是用在離線狀態下儲存大量的結構化數據操作風格就跟axios一樣，是請求相比于cookie，這個的優勢在于持久化，安全，不會占用帶寬，而一般只是少量數據存儲的話還是用cookie比較方便的封裝優化待做：1：配置參數過多，應該拆分函數返回，例如openDB().add(),openDB().get()這樣2：儲存的數據應當默認為數組類型，自動去多次儲存，避免多次手動調用（原因：IndexedDB每次只能存儲一條）已考慮問題：1、版本問題：版本更新應該清空數據庫-然后重建-當然不需要考慮也是可行的若不考慮版本號，那么onupgradeneeded只會在創建數據庫時觸發，此后不再觸發2、代碼層次不考慮修改數據庫結構-不用考慮*/ export default {tar: 123,// 初始化數據倉庫initDB (init) {console.log(this)/* 數據庫名-版本號-表-自定義索引[數組]-主鍵[默認id] 版本號一般是資訊那種版本，發生版本號更新時，應該清除數據庫indexOptions = [{ name: 'name', unique: false},{ name: 'age', unique: true}]不允許 name值重復(重復會報錯) unique 表示唯一性,重復的屬性不會被存入*/const { DB, version, form, indexOptions, keyPath = 'id' } = init// 檢查兼容性const indexedDB = window.indexedDB ||window.webkitIndexedDB ||window.mozIndexedDB ||window.msIndexedDBif (!indexedDB) {alert('你的瀏覽器不支持IndexedDB')return}// 打開一個數據庫// 若要修改數據庫結構，必須觸發onupgradeneeded去修改const request = indexedDB.open(DB, version)// open一個不存在的數據庫會觸發// open一個超前版本會觸發request.onupgradeneeded = function (event) { // event包含了新舊版本號，console查看let db = event.target.resultlet objectStoreif (!db.objectStoreNames.contains(form)) { // 檢查是否存在-表objectStore = db.createObjectStore(form, { keyPath: keyPath }) // 設置默認的主鍵為id,[數據必須擁有該屬性]}if (indexOptions || indexOptions.length > 0) {indexOptions.map((item) => {objectStore.createIndex(item.name, item.name, { unique: item.unique })})}}// 發生版本更新時，由于自定義的索引會重復添加，報錯，觸發onerrorrequest.onerror = (e) => {indexedDB.deleteDatabase(DB) // 刪除數據庫alert('版本更新，重置數據庫，即將刷新頁面') // 關閉警告框后進行頁面刷新location.reload()}return {// 添加// 注意：如果傳入的數據中，含有已存在的主鍵，則該次添加數據失敗add (data) {// 考慮傳入數據數組的情況if (data instanceof Array) {request.onsuccess = (event) => {const db = event.target.resultfor (let i = 0; i < data.length; i++) {db.transaction(form, 'readwrite').objectStore(form).add(data[i])}}} else { // 傳入單個數據request.onsuccess = (event) => {const db = event.target.resultdb.transaction(form, 'readwrite').objectStore(form).add(data)}}},// 更新// 更新功能完全可以替代addput (data) {// 考慮傳入數據數組的情況if (data instanceof Array) {request.onsuccess = (event) => {const db = event.target.resultfor (let i = 0; i < data.length; i++) {db.transaction(form, 'readwrite').objectStore(form).put(data[i])}}} else { // 傳入單個數據request.onsuccess = (event) => {const db = event.target.resultdb.transaction(form, 'readwrite').objectStore(form).put(data)}}},// 刪除del (index) {// 考慮傳入數據數組的情況if (index instanceof Array) {request.onsuccess = (event) => {const db = event.target.resultfor (let i = 0; i < index.length; i++) {console.log(i)db.transaction(form, 'readwrite').objectStore(form).delete(index[i])}}} else { // 傳入單個數據request.onsuccess = (event) => {const db = event.target.resultdb.transaction(form, 'readwrite').objectStore(form).delete(index)}}},// 根據主鍵獲取數據get (index, callBack) {request.onsuccess = (event) => {const db = event.target.resultdb.transaction(form, 'readwrite').objectStore(form).get(index).onsuccess = (res) => {console.log(res)if (callBack) {callBack(res)}}}},// 根據自定義索引獲取// 始終返回一條數據，即使索引對應的值有多個index (name, index, callBack) {request.onsuccess = (event) => {const db = event.target.resultdb.transaction(form, 'readwrite').objectStore(form).index(name).get(index).onsuccess = (res) => {console.log(res)if (callBack) {callBack(res)}}}},// 遍歷each (index) {request.onsuccess = (event) => {const db = event.target.resultdb.transaction(form, 'readwrite').objectStore(form).openCursor().onsuccess = (event) => { // openCursor創建游標-指向第一項var cursor = event.target.resultif (cursor && !(index && cursor.primaryKey >= index)) { // 必須判斷時候存在，否則會多運行一次cursor.continue(3) // 游標繼續往下 搜索，重復觸發 onsuccess方法，如果到最后返回nul,指定參數則跳到對飲的indexconsole.log(cursor) // direction、key、primaryKey、source、value// cursor.delete() // 刪除當前游標下的數據-游標位置不變// cursor.update(obj) // 使用obj更新數據if (cursor.key === 2) {console.log(cursor)}}}}}}}, }

總結

以上是生活随笔為你收集整理的indexedDB简易封装的全部內容，希望文章能夠幫你解決所遇到的問題。

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