初學(xué)的時(shí)候?qū)懙膁emo,實(shí)際工作使用LOCALFORAGE庫即可。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。