1. 程式人生 > >不靠譜的IndexedDB踩坑記錄

不靠譜的IndexedDB踩坑記錄

由於做專案需要,在使用Vue開發的前端專案中實現了聊天功能,並且最終採用的是IndexedDB來存放聊天記錄(這裡使用了融雲作為第三方雲平臺進行聊天功能的實現,歷史訊息可以拉取但是認為必要性不大)。
得益於MDN上不靠譜的api和百度到的訊息的無用,實現的一點點功能卻也踩了不少坑的感覺。

首先說一下需求:
1.新建資料庫
2.查詢/插入/刪除資料
3.清空資料
4.刪除資料庫

以上前三個需求,都可以對應IndexedDB例項的Database例項去呼叫解決,MDN上也給出了基本的程式碼示例,對部分知識點解釋一下:
1.database.open方法開啟的資料庫,如果進行的操作會對資料庫內容進行修改(包括修改資料庫結構或者資料),則需要使用一個新的版本號進行開啟
2.上面提到的新的版本號,只能>=原本的版本號
3.IndexedDB資料庫存放的是物件而不是結構化的資料,這點要有所認識。對於索引的建立和使用,MDN上也說得還算明白,不在贅述
4.注意對資料庫的操作(包括開啟),都是非同步操作。如

  return new Promise((resolve, reject) => {
      let request = indexedDB.deleteDatabase(db.name)
      request.onerror = (event) => {
        console.log('刪除資料庫失敗')
        reject('刪除資料庫失敗')
      }
      request.onsuccess = (event) => {
        console.log('資料庫已刪除')
        resolve()
      }
    })

這裡執行的是刪除資料庫的操作,其他操作大致相同,都是執行操作後,通過 .onsuccess或 .onerror的回撥函式進行操作結果的獲取以及進一步操作(這裡我是寫了Promise以讓非同步結果能夠返回)
5.最大的坑,刪除資料庫操作是IndexedDB例項上的操作(如上程式碼所示)…
5.5之後記–是的我一直以為也是在database例項上一直找api一直找不到各種百度“indexeddb刪除資料庫”都是隻有刪除記錄等等…最終曲線救國跑去刪除objectStore(於是這裡明明要刪除資料庫了我還要修改版本號開啟資料庫再刪除倉庫巴拉巴拉…)

好的就說這麼多了。關於IndexedDB的用法沒有研究太多,有關的優缺點、侷限性也沒有仔細去研究,但是目前感覺可以滿足需求。
主要是記錄一下自己踩過的一個小坑。

使用什麼技術棧關鍵在於你的需求是什麼,比如vuex的使用。