封裝如下：
indexDBOperate.js export class IndexDBOperate {
db = null // 資料庫執行個體
databaseName = null // 資料庫名稱
version = null // 資料庫版本
objStoName = null // 表或對象倉庫名稱
constructor(databaseName, version, objStoName, indexObj, successFunc) {
this.databaseName = databaseName
this.version = version
this.objStoName = objStoName
// 若無此資料庫則會建立
const request = window.indexedDB.open(databaseName, version)
request.onerror = e => {
console.log('資料庫打開報錯')
}
request.onsuccess = e => {
this.db = request.result
const db = request.result
console.log('資料庫打開成功')
// 建表或對象倉庫，id作為主鍵
successFunc(db)
}
// 如果指定的版本号，大于資料庫的實際版本号，就會發生資料庫更新事件
// 第一次打開資料庫時，會先觸發upgradeneeded事件，然後觸發success事件
request.onupgradeneeded = e => {
// console.log('資料庫打開/建立報錯')
// this.db = e.target.result
const db = e.target.result
if (!db.objectStoreNames.contains(objStoName)) {
// 建表
const objectStore = db.createObjectStore(objStoName, { keyPath: 'id' });
// 建立索引（索引名稱、索引所在的屬性、配置對象（說明該屬性是否包含重複的值））
objectStore.createIndex(indexObj.indexName, indexObj.IndexAattrOf, indexObj.config)
}
}
request.blocked = e => {
// console.log('上一次的資料庫連接配接還未關閉')
}
}
// 建立
createData = data => {
const request = this.db.transaction([`${this.objStoName}`], 'readwrite')
.objectStore(`${this.objStoName}`)
.add(data)
request.onsuccess = e => {
console.log('資料寫入成功')
}
request.onerror = e => {
console.log('資料寫入失敗', e.target.error)
}
}
// 更新
updateData = data => {
const request = this.db.transaction([`${this.objStoName}`], 'readwrite').objectStore(`${this.objStoName}`)
.put(data)
request.onsuccess = e => {
// console.log('資料更新成功')
};
request.onerror = e => {
// console.log('資料更新失敗')
}
}
// 讀
retrieveData = (id, successFunc) => {
const transaction = this.db.transaction([`${this.objStoName}`])
const objectStore = transaction.objectStore(`${this.objStoName}`)
const request = objectStore.get(id)
request.onerror = e => {
// console.log('事務失敗')
};
request.onsuccess = e => {
if (request.result) {
successFunc(request.result)
// console.log('Name: ' + request.result.name)
// console.log('Age: ' + request.result.age)
// console.log('Email: ' + request.result.email)
} else {
// console.log('未獲得資料記錄')
}
};
}
// 周遊
readAllData = successFunc => {
const objectStore = this.db.transaction([`${this.objStoName}`], 'readwrite')
.objectStore(`${this.objStoName}`)
objectStore.openCursor().onsuccess = e => {
const cursor = e.target.result
if (cursor) {
successFunc(cursor)
cursor.continue()
// console.log('Id: ' + cursor.key)
// console.log('Name: ' + cursor.value.name)
// console.log('Age: ' + cursor.value.age)
// console.log('Email: ' + cursor.value.email)
} else {
// console.log('沒有更多資料了！')
}
};
}
// 周遊（加入模糊搜尋）
fuzzySearchData = (field, keyWord, successFunc) => {
const objectStore = this.db.transaction([`${this.objStoName}`], 'readwrite')
.objectStore(`${this.objStoName}`)
const data = []
objectStore.openCursor().onsuccess = e => {
const cursor = e.target.result
if (cursor) {
if (cursor.value[`${field}`].indexOf(keyWord) >= 0) {
data.push(cursor.value)
}
cursor.continue()
// console.log('Id: ' + cursor.key)
// console.log('Name: ' + cursor.value.name)
// console.log('Age: ' + cursor.value.age)
// console.log('Email: ' + cursor.value.email)
} else {
// console.log('沒有更多資料了！')
successFunc(data)
}
};
}
deleteData = id => {
const request = this.db.transaction([`${this.objStoName}`], 'readwrite')
.objectStore(`${this.objStoName}`)
.delete(id)
request.onsuccess = e => {
// console.log('資料删除成功')
};
}
// 通過索引擷取資料
retrieveByIndex = (indexName, searchTerm, successFunc) => {
const transaction = this.db.transaction([`${this.objStoName}`], 'readonly')
const store = transaction.objectStore(`${this.objStoName}`)
const index = store.index(`${indexName}`)
const request = index.get(`${searchTerm}`)
request.onsuccess = e => {
const { result } = e.target
console.log(e.target)
if (result) {
// ...
successFunc(result)
} else {
// ...
}
}
}
}// 封裝by 有蚊子 @2019.11.20 使用示例：
// indexDB調用示例
handleDB = () => {
const indexDB = new IndexDBOperate('chat_help_db', 1, 'chat_help', {
indexName: 'name',
IndexAattrOf: 'name',
config: {
unique: false,
},
}, db => {
indexDB.fuzzySearchData('name', 'a', result => {
console.log(result)
})
indexDB.createData({ id: 7, name: 'aaa' })
indexDB.updateData({ id: 3, name: 'a2' })
indexDB.retrieveByIndex('name', 'a', result => {
console.log(result)
})
indexDB.deleteData(7)
indexDB.retrieveData(1, result => {
console.log(result)
})
indexDB.readAllData(result => {
console.log(result)
})
})
} 參考資料：
1. http://www.ruanyifeng.com/blog/2018/07/indexeddb.html 阮一峰indexdb使用
2.https://wangdoc.com/javascript/bom/indexeddb.html#idbindex-%E5%AF%B9%E8%B1%A1 indexdb api文檔