JavaScript IndexedDB示例遭遇txn与db未定义错误求助

错误原因拆解 #

1. db is not defined
   在request.onsuccess回调中，直接调用insertContact(db, ...)但未对db变量赋值。数据库打开成功后，必须从event.target.result获取有效的数据库实例。

2. txn is not defined
insertContact函数的花括号过早闭合，导致后续操作事务的代码脱离了函数作用域。txn是函数内部声明的变量，外部无法访问，需将所有事务相关代码包裹在函数花括号内。

另外还有两个隐性问题：

• 错误日志使用双引号包裹模板字符串，无法解析变量，需改为反引号
• 单条事务完成后立即关闭数据库会导致第二条插入操作失败，需移除该操作或统一在所有插入完成后关闭

修复后的完整代码 #

<html>
    <head>
        <title>Indexed Database</title>
    </head>
    <body>
        <script>
               if (!window.indexedDB)  {
                   console.log("Your browser doesn't support IndexedDB");
               }
                   const request = indexedDB.open("indexedDatabase", 3);
                   request.onerror = (event) => {
                       console.error(`Database error: ${event.target.errorCode}`);
                   };
                   request.onsuccess = (event) => {
                       console.log("success: " + request);
                       // 获取数据库实例
                       const db = event.target.result;

                       insertContact(db, {
                           email: 'john.doe@outlook.com',
                           firstName: 'John',
                           lastName: 'Doe'
                       });

                       insertContact(db, {
                           email: 'jane.doe@gmail.com',
                           firstName: 'Jane',
                           lastName: 'Doe'
                       });
                   };

                   // 创建Contacts对象仓库和索引
                   request.onupgradeneeded = (event) => {
                       let db = event.target.result;

                       // 创建自增ID的Contacts对象仓库
                       let store = db.createObjectStore('Contacts', {
                           autoIncrement: true
                       });

                       // 为email属性创建唯一索引
                       let index = store.createIndex('email', 'email', {
                           unique: true
                       });
                   };

                   function insertContact(db, contact) {
                       // 创建读写事务
                       const txn = db.transaction('Contacts','readwrite');
                       // 获取Contacts对象仓库
                       const store = txn.objectStore('Contacts');

                       let query = store.put(contact);

                       // 处理插入成功
                       query.onsuccess = function (event) {
                           console.log('数据插入成功:', event);
                       };

                       // 处理插入失败
                       query.onerror = function (event) {
                           console.log('插入失败:', event.target.errorCode);
                       }

                       // 事务完成回调
                       txn.oncomplete = function () {
                           console.log('事务执行完成');
                       };
                   }
            </script>
    </body>
</html>

关键修复点说明 #

• 在request.onsuccess中新增const db = event.target.result;，获取合法的数据库实例
• 将所有事务操作代码移入insertContact函数作用域内，确保txn可被正常访问
• 修正模板字符串的引号类型，保证变量解析正常
• 移除事务内的db.close()，避免后续插入操作因数据库关闭失败

内容的提问来源于stack exchange，提问作者James Khor