01 选择 IndexedDB 的优势与应用场景
01.1 IndexedDB 的核心概念
在现代网页应用中，IndexedDB 是一种浏览器端的非关系型数据库，支持离线存取和异步操作。它以 数据库、对象仓库（objectStore）、键 和 事务为核心单位，能够长期保存结构化数据。键路径、索引等概念让检索变得高效。通过这些要素，前端应用可以在离线状态下也能持续读写数据，提高用户体验。
与传统的本地存储相比，IndexedDB 提供了更丰富的数据模型和异步 API，适合存放大量结构化数据并需要复杂查询的场景。它支持多种数据类型、版本管理以及事务级别的原子性操作，这使得从零开始掌握数据库存取的学习过程更具实战价值。
01.2 为什么在浏览器端使用 IndexedDB
对需要离线工作能力的应用，IndexedDB 是首选之一，因为它可以在浏览器中独立于服务器进行数据读取与写入。离线首选项、离线表单缓存、以及 离线消息队列等场景都能从中受益。通过事务封装，开发者能确保复杂操作的原子性，降低数据不一致的风险。
在前端架构中，IndexedDB 的使用通常与服务端数据同步配合，形成离线-在线的协同工作模式。你可以先将变更写入本地数据库，等网络恢复后再进行合并，确保用户行为不被网络波动中断。>
02 创建并打开数据库连接：逐步引导
02.1 初始化打开请求
要开始使用 IndexedDB，第一步是调用 indexedDB.open，传入数据库名称和版本号。该请求会触发 onupgradeneeded 事件，用于创建对象存储与索引。完成后，onsuccess 事件会返回一个 IDBDatabase 对象，后续操作都基于它完成。
通过这种异步模型，浏览器不会阻塞 UI 线程，用户界面仍然可以保持响应。注意：如果版本号提升，浏览器会触发升级逻辑，务必在该阶段创建或修改对象仓库。
// 02.1 打开数据库
const request = indexedDB.open('myDatabase', 1);request.onerror = function(event) {console.error('打开数据库失败', event.target.error);
};request.onsuccess = function(event) {const db = event.target.result;// 现在可以使用 db 进行后续操作console.log('数据库打开成功');
};02.2 处理版本变更与对象存储创建
当数据库版本需要升级时，onupgradeneeded 会被触发。在该回调中你可以创建对象仓库、设置主键以及建立索引。未创建的仓库将会成为应用后续数据结构的基础。
确保在升级过程中对老版本的数据结构进行兼容处理，避免应用在升级后出现读取失败的情况。以下示例展示如何在升级中创建一个名为 users 的对象仓库，并设定主键以及自动自增。
request.onupgradeneeded = function(event) {const db = event.target.result;if (!db.objectStoreNames.contains('users')) {const store = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });store.createIndex('by_name', 'name', { unique: false });}
};03 基本的 CRUD 操作：创建、读取、更新与删除
03.1 插入数据（Create）
要向对象仓库中写入数据，需开启一个 readwrite 事务，然后使用 add 或 put。add 会把新记录以指定主键写入，put 则在主键存在时更新，否则创建新记录。
在实际应用中，通常会在提交表单后执行写入操作，并在回调中确认写入结果，以确保 UI 与数据状态的一致性。
function addUser(db, user) {const tx = db.transaction(['users'], 'readwrite');const store = tx.objectStore('users');const request = store.add(user);request.onsuccess = function() {console.log('用户添加成功，id:', request.result);};request.onerror = function(event) {console.error('添加用户失败', event.target.error);};
}03.2 读取数据（Read）
读取数据常用的方法包括 get、getAll 以及基于索引的查询。读取过程同样需要通过事务来保障数据的一致性。对于需要多条件筛选的场景，索引提供了高效的检索路径。
读取操作更多地采用异步回调模式，获取结果后再在业务逻辑中进行渲染或后续处理。
function getUserById(db, id, callback) {const tx = db.transaction(['users'], 'readonly');const store = tx.objectStore('users');const request = store.get(id);request.onsuccess = function() {callback(request.result);};request.onerror = function(event) {console.error('检索失败', event.target.error);callback(null);};
}03.3 更新与删除（Update/Delete）
更新数据可以使用 put，该方法会以传入的对象为准更新已有记录，若记录不存在则创建新条目。删除数据则使用 delete。同样需要通过只读/只写的事务来执行。
合理的错误处理和提交时的用户反馈，是确保应用健壮性的重要一环。
function updateUser(db, user) {const tx = db.transaction(['users'], 'readwrite');const store = tx.objectStore('users');const request = store.put(user);request.onsuccess = function() {console.log('更新成功');};request.onerror = function(event) {console.error('更新失败', event.target.error);};
}function deleteUser(db, id) {const tx = db.transaction(['users'], 'readwrite');const store = tx.objectStore('users');const request = store.delete(id);request.onsuccess = function() {console.log('删除成功');};request.onerror = function(event) {console.error('删除失败', event.target.error);};
}04 事务与并发访问的最佳实践
04.1 使用事务的正确姿势
事务在 IndexedDB 中提供了操作的原子性和一致性。尽量将相关的写操作放在同一个 readwrite 事务中，以避免数据不一致。事务结束时会自动提交或回滚，因此在设计时要清晰地界定需要一次性完成的任务范围。
在高并发场景下，避免同时打开过多事务，以免造成性能瓶颈。按需创建短生命周期的事务，是提升页面响应速度的关键。
// 同时写入两张表的简单示例
function atomicInsert(db, user, profile) {const tx = db.transaction(['users', 'profiles'], 'readwrite');const usersStore = tx.objectStore('users');const profilesStore = tx.objectStore('profiles');usersStore.add(user);profilesStore.add(profile);tx.oncomplete = function() {console.log('原子性写入完成');};tx.onerror = function(event) {console.error('原子性写入失败', event.target.error);};
}04.2 错误处理和回调模式
IndexedDB 的 API 基于事件驱动，错误处理要覆盖 onerror、onblocked、以及事务的 oncomplete 与 onabort。对于复杂逻辑，可以用基于 Promise 的封装来简化异步代码。
下面给出一个简单的 Promise 封装示例，方便将数据库操作与现代前端框架的异步逻辑对接。
function requestToPromise(req) {return new Promise((resolve, reject) => {req.onsuccess = () => resolve(req.result);req.onerror = () => reject(req.error);});
}05 调试技巧与常见问题排错
05.1 常见错误类型
常见错误包括 版本冲突、对象仓库不存在、以及在升级阶段未正确处理旧数据的情况。通过在 onupgradeneeded 中逐步创建与验证对象仓库，可以提前发现问题。
此外，检查 db.objectStoreNames 可帮助确认当前数据库中有哪些对象仓库，避免误用名称导致的读取失败。
request.onupgradeneeded = function(event) {const db = event.target.result;// 仅在升级时创建if (!db.objectStoreNames.contains('logs')) {db.createObjectStore('logs', { keyPath: 'id', autoIncrement: true });}
};05.2 调试工具与实战技巧
在调试 IndexedDB 时，浏览器开发者工具中的 Application 面板可以查看 IndexedDB 的数据库、对象仓库、记录以及索引信息。通过在代码中添加清晰的日志，可以快速定位是写入、读取还是版本升级引发的问题。
将复杂的数据库操作封装成模块，并提供明确的 API，能够更好地在项目中实现可维护性和可测试性。在遇到问题时，分解步骤、逐一验证各环节，是排错的高效方式。
