HTML5-indexedDB使用常见错误总结

最新推荐文章于 2025-06-05 09:45:47 发布

weixin_33753003

最新推荐文章于 2025-06-05 09:45:47 发布

阅读量267

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/BlingSun/p/10056680.html

本文深入探讨IndexedDB在使用过程中常见的两大错误：在success事件中调用createObjectStore方法及因upgradeneeded事件未触发导致的storeobject创建失败。详细分析了错误原因，并提供了在不同浏览器环境下确保IndexedDB正确使用的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

indexedDB使用过程中的错误1：

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);};

错误2：

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函数后面，也无法保证哪个先完成。
---------------------
作者：柒青衿
来源：优快云
原文：https://blog.youkuaiyun.com/qiqingjin/article/details/53263261
版权声明：本文为博主原创文章，转载请附上博文链接！

转载于:https://www.cnblogs.com/BlingSun/p/10056680.html