JSIndexedDB事务存储全解析

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JS IndexedDB 事务存储方案详解》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

IndexedDB是浏览器端复杂数据存储的首选方案，它支持事务、索引和大量结构化数据存储，具备ACID特性，适用于需离线访问、高性能查询和数据完整性保障的场景；相比localStorage的简单键值对，IndexedDB通过版本控制实现数据库升级与数据迁移，并利用异步事务机制管理并发操作，避免阻塞和数据损坏，是PWA和复杂前端应用的核心技术。

在浏览器端需要进行复杂、结构化且具备事务性保障的数据存储时，IndexedDB 几乎是唯一的、也是最可靠的选择。它提供了一个低级的API，允许开发者创建和管理客户端的数据库，支持事务、索引和大量数据存储，远超localStorage或sessionStorage的简单键值对限制。

解决方案

要使用 IndexedDB 实现事务型数据存储，核心在于理解其异步、事件驱动的特性以及事务的概念。我通常会封装一套基础的工具函数来简化操作，毕竟原生的API确实有些繁琐。

首先，你需要打开（或创建）一个数据库：

function openDatabase(dbName, version, upgradeCallback) {
    return new Promise((resolve, reject) => {
        const request = indexedDB.open(dbName, version);

        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            console.log(`Database ${dbName} upgrading to version ${version}...`);
            upgradeCallback(db, event.oldVersion, event.newVersion);
        };

        request.onsuccess = (event) => {
            console.log(`Database ${dbName} opened successfully.`);
            resolve(event.target.result);
        };

        request.onerror = (event) => {
            console.error(`Database error: ${event.target.errorCode}`, event);
            reject(event.target.error);
        };
    });
}

这里onupgradeneeded是关键，它只在数据库版本号变更时触发，用于创建对象存储（Object Stores）和索引。这是一个典型的事务上下文，确保了数据库结构的原子性更新。

接下来，进行数据操作时，你需要一个事务。IndexedDB 的事务是短期的，一旦所有操作完成或出错，事务就会自动关闭。理解这一点很重要，它与传统关系型数据库的长事务概念有所不同。

async function performTransaction(db, storeNames, mode, operationCallback) {
    const transaction = db.transaction(storeNames, mode); // mode可以是 'readonly' 或 'readwrite'

    return new Promise((resolve, reject) => {
        transaction.oncomplete = () => {
            console.log('Transaction completed.');
            resolve();
        };

        transaction.onerror = (event) => {
            console.error('Transaction failed:', event.target.error);
            reject(event.target.error);
        };

        transaction.onabort = () => {
            console.warn('Transaction aborted.');
            reject(new Error('Transaction aborted'));
        };

        try {
            operationCallback(transaction); // 在这里执行具体的增删改查操作
        } catch (e) {
            console.error("Error during operation callback, aborting transaction:", e);
            transaction.abort(); // 如果回调中出现同步错误，需要手动中止事务
            reject(e);
        }
    });
}

// 示例：添加数据
async function addData(db, storeName, data) {
    await performTransaction(db, [storeName], 'readwrite', (transaction) => {
        const store = transaction.objectStore(storeName);
        const request = store.add(data); // add用于添加新记录，如果主键重复会失败

        request.onsuccess = () => console.log('Data added successfully.');
        request.onerror = (event) => console.error('Add data error:', event.target.error);
    });
}

// 示例：获取数据
async function getData(db, storeName, key) {
    return new Promise(async (resolve, reject) => {
        await performTransaction(db, [storeName], 'readonly', (transaction) => {
            const store = transaction.objectStore(storeName);
            const request = store.get(key);

            request.onsuccess = (event) => resolve(event.target.result);
            request.onerror = (event) => reject(event.target.error);
        }).catch(reject); // 捕获 performTransaction 的拒绝
    });
}

这些基础的封装，能让我在实际项目中更舒服地使用 IndexedDB。关键是把异步操作 Promise 化，然后将事务的生命周期管理好。

IndexedDB 和 localStorage/sessionStorage 有何本质区别，我什么时候应该选择它？

这其实是很多前端开发者初次接触浏览器存储时都会遇到的疑问。简单来说，localStorage和sessionStorage是同步的、基于键值对的API，它们存储的数据量非常有限（通常5-10MB），且只能存储字符串。它们没有索引，也没有任何事务保障。我经常把它们比作一个简单的抽屉，你放进去什么，就只能原样取出什么，而且抽屉容量不大。

而 IndexedDB，它是一个真正的数据库，虽然运行在浏览器中。它支持存储大量结构化数据（通常高达几百MB甚至更多，取决于浏览器和用户设备），能够创建对象存储（类似于关系型数据库的表），并在这些存储上定义索引，实现高效的数据查询。最重要的是，它提供了事务机制，确保了数据操作的原子性、一致性、隔离性和持久性（ACID特性）。这意味着，一系列操作要么全部成功，要么全部失败，不会出现数据损坏的中间状态。

所以，何时选择 IndexedDB？

1. 需要存储大量数据时：比如离线缓存大量文章、图片URL、用户生成的内容等。
2. 需要存储结构化数据时：例如，一个复杂的待办事项列表，每个事项有标题、描述、状态、优先级等字段，你希望按优先级或状态查询。
3. 需要高性能查询时：通过索引，IndexedDB 可以快速定位和检索数据，而 localStorage 只能全量遍历。
4. 需要数据完整性保障时：尤其是在进行多步操作或需要确保数据不被并发修改时，事务是不可或缺的。例如，一个离线编辑功能，用户修改了多个字段，需要一次性保存。
5. 需要离线访问时：结合 Service Worker，IndexedDB 可以作为持久化的离线数据存储方案，提升用户体验。

我个人在做一些PWA项目或者需要复杂离线能力的应用时，IndexedDB 几乎是我的首选。它虽然学习曲线稍陡，但带来的能力提升是其他浏览器存储方案无法比拟的。

如何在 IndexedDB 中正确处理数据版本升级和迁移？

数据版本升级和迁移是 IndexedDB 使用中一个非常实际且容易出错的地方。当你的应用迭代，数据模型发生变化时，比如增加了一个新的对象存储，或者在一个已有的对象存储中增加、修改了索引，你就需要更新数据库的版本号。

关键点在于 onupgradeneeded 事件。这个事件只会在 indexedDB.open() 时，传入的版本号大于当前数据库已有的版本号时触发。在这个回调里，你可以：

1. 创建新的对象存储：

   if (oldVersion < 2) { // 从版本1升级到版本2
       db.createObjectStore('new_store', { keyPath: 'id' });
       console.log('Created new_store');
   }

2. 删除旧的对象存储：

   if (oldVersion < 3) { // 从版本2升级到版本3
       if (db.objectStoreNames.contains('old_store')) {
           db.deleteObjectStore('old_store');
           console.log('Deleted old_store');
       }
   }

3. 在现有对象存储上创建或删除索引：

   if (oldVersion < 4) { // 从版本3升级到版本4
       const userStore = transaction.objectStore('users'); // 注意：在onupgradeneeded中，需要从db获取objectStore，而不是transaction
       if (!userStore.indexNames.contains('email_idx')) {
           userStore.createIndex('email_idx', 'email', { unique: true });
           console.log('Created email_idx on users store');
       }
   }

4. 迁移现有数据：这是最复杂的部分。当你改变了数据结构，比如将某个字段从字符串变为数字，或者拆分合并字段时，你需要遍历旧的数据，进行转换，然后存入新的结构。

   if (oldVersion < 5) { // 从版本4升级到版本5
       const oldStore = db.transaction('old_users', 'readwrite').objectStore('old_users');
       const newStore = db.createObjectStore('users_v5', { keyPath: 'id' });
   
       oldStore.openCursor().onsuccess = (event) => {
           const cursor = event.target.result;
           if (cursor) {
               const oldData = cursor.value;
               const newData = {
                   id: oldData.id,
                   name: oldData.firstName + ' ' + oldData.lastName, // 示例：合并字段
                   age: parseInt(oldData.ageStr), // 示例：类型转换
                   // ... 其他字段
               };
               newStore.add(newData);
               cursor.continue();
           } else {
               console.log('Data migration from old_users to users_v5 complete.');
               // 迁移完成后，可以考虑删除旧的object store
               db.deleteObjectStore('old_users');
           }
       };
   }

这里的关键在于，onupgradeneeded 事件的回调函数会接收到一个 IDBVersionChangeEvent 对象，通过 event.target.result 可以获取到 IDBDatabase 实例。在这个上下文里，你可以直接对数据库结构进行修改。同时，oldVersion 和 newVersion 参数非常有用，它们让你能够编写增量式的升级逻辑，确保无论用户从哪个旧版本升级，都能正确地执行相应的迁移步骤。

我的经验是，每次升级都要非常小心，充分测试。因为一旦用户的数据因为升级逻辑错误而损坏，恢复起来会非常麻烦。最好在开发时就考虑好数据模型的可扩展性，减少未来大刀阔斧的修改。

IndexedDB 的事务机制是如何工作的，以及如何避免常见的并发问题？

IndexedDB 的事务机制是其核心特性，也是它能够提供可靠数据存储的基础。它与传统关系型数据库的事务概念类似，但有一些显著的区别，主要是因为其异步和单线程的特性。

事务是如何工作的？

当你调用 db.transaction(storeNames, mode) 时，你就创建了一个事务。

1. 范围（Scope）：storeNames 参数指定了事务会操作哪些对象存储。事务只能访问这些指定的存储。
2. 模式（Mode）：mode 参数可以是 'readonly' 或 'readwrite'。
   • 'readonly'：只允许读取数据。多个只读事务可以并发运行。
   • 'readwrite'：允许读取和写入数据。同一时间，对于同一个对象存储，只能有一个读写事务活跃。这是为了避免写入冲突。
3. 生命周期：事务是短期的。一旦你创建了它，并执行了所有操作请求（例如 put, get, delete），浏览器会等待这些请求完成。如果所有请求都成功，事务就会提交（oncomplete 事件触发）。如果有任何一个请求失败，或者你显式调用了 transaction.abort()，事务就会回滚（onabort 事件触发），所有在事务中进行的修改都会被撤销。
4. 异步性：IndexedDB 的所有操作都是异步的。你提交一个请求，它会立即返回一个 IDBRequest 对象，但实际的数据操作会在后台进行。你需要监听 IDBRequest 的 onsuccess 和 onerror 事件来处理结果。

避免常见的并发问题

由于 IndexedDB 的事务模型，并发问题主要体现在读写事务的排队上。

1. 避免长时间运行的读写事务：这是最重要的。一个读写事务会锁定其作用域内的对象存储，阻止其他读写事务访问这些存储。如果一个事务运行时间过长，它会阻塞其他操作，导致应用响应变慢甚至卡顿。我的建议是，只在事务中包含必要的、原子性的操作，尽快完成并让事务提交。
   • 错误示例：在一个事务中，先读取大量数据，然后对每条数据进行复杂的计算，最后再写回。
   • 正确做法：将读取和计算分离。先用一个只读事务读取数据，在事务外进行计算，然后用一个新的读写事务将计算结果写回。
2. 处理事务阻塞（Blocked）事件：当你尝试打开一个数据库，但有另一个标签页或窗口正在使用一个旧版本的数据库时，indexedDB.open() 的请求可能会触发 onblocked 事件。这意味着你的数据库请求被阻塞了。通常，你需要提示用户关闭其他标签页，或者刷新页面。

   request.onblocked = () => {
       console.warn('Database access blocked. Please close other tabs using this app.');
       alert('数据库被占用，请关闭其他相关页面后重试。');
   };

3. 合理选择事务模式：如果只是读取数据，总是使用 'readonly' 模式。这允许更多的并发读取，提高了效率。只有在需要修改数据时才使用 'readwrite'。
4. 错误处理与回滚：务必在每个 IDBRequest 上监听 onerror 事件，并在 transaction.onerror 和 transaction.onabort 中进行适当的错误处理。如果你的业务逻辑在事务中发现问题，记得调用 transaction.abort() 来回滚所有修改，保持数据的一致性。
5. 异步操作链：在 readwrite 事务中，如果你有多个写入操作，它们会按顺序执行。你需要确保前一个操作的 onsuccess 触发后，才开始下一个操作，或者使用 Promise 链来管理这些异步步骤，确保它们都在同一个事务上下文中完成。

总的来说，IndexedDB 的事务机制非常强大，但它要求开发者对异步编程和事务生命周期有清晰的理解。一旦掌握，它就能为你的前端应用提供坚实的数据存储基础。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。