JS 浏览器数据库操作 - 使用 IndexedDB 实现事务型数据存储方案-js教程-PHP中文网

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

js 浏览器数据库操作 - 使用 indexeddb 实现事务型数据存储方案

在浏览器端需要进行复杂、结构化且具备事务性保障的数据存储时，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？

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

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

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

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

关键点在于

onupgradeneeded

登录后复制

事件。这个事件只会在

indexedDB.open()

登录后复制

时，传入的版本号大于当前数据库已有的版本号时触发。在这个回调里，你可以：

创建新的对象存储：

Insou AI
Insou AI 是一款强大的人工智能助手，旨在帮助你轻松创建引人入胜的内容和令人印象深刻的演示。

69

查看详情
```
if (oldVersion < 2) { // 从版本1升级到版本2
    db.createObjectStore('new_store', { keyPath: 'id' });
    console.log('Created new_store');
}
```
登录后复制

删除旧的对象存储：

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

登录后复制

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

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

登录后复制

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

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)

登录后复制

时，你就创建了一个事务。

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

避免常见的并发问题

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

避免长时间运行的读写事务：这是最重要的。一个读写事务会锁定其作用域内的对象存储，阻止其他读写事务访问这些存储。如果一个事务运行时间过长，它会阻塞其他操作，导致应用响应变慢甚至卡顿。我的建议是，只在事务中包含必要的、原子性的操作，尽快完成并让事务提交。
- 错误示例：在一个事务中，先读取大量数据，然后对每条数据进行复杂的计算，最后再写回。
- 正确做法：将读取和计算分离。先用一个只读事务读取数据，在事务外进行计算，然后用一个新的读写事务将计算结果写回。
处理事务阻塞（Blocked）事件：当你尝试打开一个数据库，但有另一个标签页或窗口正在使用一个旧版本的数据库时，
```
indexedDB.open()
```
登录后复制
的请求可能会触发
```
onblocked
```
登录后复制
事件。这意味着你的数据库请求被阻塞了。通常，你需要提示用户关闭其他标签页，或者刷新页面。
```
request.onblocked = () => {
    console.warn('Database access blocked. Please close other tabs using this app.');
    alert('数据库被占用，请关闭其他相关页面后重试。');
};
```
登录后复制
合理选择事务模式：如果只是读取数据，总是使用
```
'readonly'
```
登录后复制
模式。这允许更多的并发读取，提高了效率。只有在需要修改数据时才使用
```
'readwrite'
```
登录后复制
。
错误处理与回滚：务必在每个
```
IDBRequest
```
登录后复制
上监听
```
onerror
```
登录后复制
事件，并在
```
transaction.onerror
```
登录后复制
和
```
transaction.onabort
```
登录后复制
中进行适当的错误处理。如果你的业务逻辑在事务中发现问题，记得调用
```
transaction.abort()
```
登录后复制
来回滚所有修改，保持数据的一致性。
异步操作链：在
```
readwrite
```
登录后复制
事务中，如果你有多个写入操作，它们会按顺序执行。你需要确保前一个操作的
```
onsuccess
```
登录后复制
触发后，才开始下一个操作，或者使用
```
Promise
```
登录后复制
链来管理这些异步步骤，确保它们都在同一个事务上下文中完成。