IT序号网

HTML5-indexedDB使用常见错误总结

sanshao 2021年05月25日 编程语言 314 0

indexedDB使用过程中常常会出现以下错误:

Failed to execute ‘createObjectStore’ on ‘IDBDatabase’: The database is not running a version change transaction.

这是由于你在success事件的回调中调用createObjectStore方法,该方法应该在upgradeneeded事件的回调中调用。

\\获取indexedDB对象 
const indexedDB = window.indexedDB || window.webkitIndexedDB ||  
window.mozIndexedDB; 
\\打开数据库,在回调中创建store object 
const request = indexedDB.open(DBName, version); 
request.onsuccess = (e) => { 
this.db = e.target.result; 
}; 
request.onupgradeneeded = (e) => { 
this.db = e.target.result; 
if(!this.db.objectStoreNames.contains(storeName)){ 
this.store = this.db.createObjectStore(storeName, { keyPath: 'key'}); 
} 
} 
request.onerror = (e) => {console.log('Can not open indexedDB', e);};

这里还可能出现另一个错误:

Failed to exectue ‘transaction’ on ‘IDBDatabase’: One of the specified stores was not found.

这是因为upgradeneeded事件没有被触发。
这里需要注意upgradeneeded事件。首先,根据API,应该在upgradneeded事件的回调函数中调用createObjectStore方法创建store object,不应该在success的回调中,否则会报错。其次,当为open方法传入一个本域没有的数据库名时,会创建相应的数据库,并触发success、upgradeneeded事件,从而创建一个store object。但是,chrome54并不会触发upgradeneeded事件,造成store object不会被创建,后续在store object上创建事务并操作数据时候就会报错。Stackoverflow上提供的解决办法是,在open方法传入第二个参数(与已有version不同,且更大),这样就会触发chrome上的upgradeneeded事件了。不过,每次都需要调用db.version获取当前的版本号。

另外可能出现的一个错误是:

Cannot read property ‘createObjectStore’ of undefined

这是因为indexedDB是异步的,你必须在回调函数中使用createObjectStore方法,即使你把createObjectStore调用写在open函数后面,也无法保证哪个先完成。


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!