IndexedDB 是浏览器提供的一个客户端存储方案，适合存储大量结构化数据。与 localStorage 的键值对不同，IndexedDB 更像一个对象数据库，支持索引、事务和游标操作。在 JavaScript 中连接 IndexedDB 的核心是调用 indexedDB.open() 方法，该方法接收数据库名称和版本号，并返回一个 IDBOpenDBRequest 对象。下面将从基础连接到版本升级、错误处理及常见模式详细讲解。
1. 基本连接流程
使用 indexedDB.open(databaseName, version) 打开或创建数据库。如果数据库不存在，会自动创建；如果版本号更高，会触发 upgradeneeded 事件（用于创建对象存储或索引）。连接过程是异步的，通过监听 success、error、upgradeneeded 事件来处理结果。
// 打开名为 "myDatabase" 的数据库，版本为 1
let request = indexedDB.open("myDatabase", 1);
// 当数据库打开成功时触发
request.onsuccess = function(event) {
let db = event.target.result;
console.log("数据库连接成功，数据库对象：", db);
};
// 当打开失败时触发
request.onerror = function(event) {
console.error("数据库连接失败：", event.target.error);
};
// 当数据库版本升级或首次创建时触发（最重要的事件）
request.onupgradeneeded = function(event) {
let db = event.target.result;
console.log("数据库升级中，当前版本：", event.oldVersion, "->", event.newVersion);
// 在此处创建对象存储和索引
if (!db.objectStoreNames.contains("users")) {
let store = db.createObjectStore("users", { keyPath: "id" });
store.createIndex("nameIndex", "name", { unique: false });
}
};上述代码中，onupgradeneeded 是连接过程的核心。即使数据库已经存在而且版本号相同，该事件也不会触发；只有版本号更高时才会触发。所以第一次打开任何数据库时，由于版本从 0 开始，一定会触发该事件。
2. 处理版本变更与事务
连接成功后，result 属性是一个 IDBDatabase 对象。之后所有的读写操作都发生在事务中。在 onupgradeneeded 事件中创建的数据库模式（对象存储和索引）会持久化。注意：不能在 onsuccess 中修改模式（如创建或删除对象存储），必须在 onupgradeneeded 中或通过再次打开更高版本号来实现。
// 假设已经连接成功，获取 db 对象
function addUser(db, user) {
// 创建一个读写事务，指定操作的对象存储名称
let transaction = db.transaction(["users"], "readwrite");
let store = transaction.objectStore("users");
let request = store.add(user); // 添加数据
request.onsuccess = function() {
console.log("用户添加成功");
};
request.onerror = function(event) {
console.error("添加用户失败：", event.target.error);
};
// 事务完成监听
transaction.oncomplete = function() {
console.log("事务完成");
};
}
// 使用示例（需在 onsuccess 内部调用）
addUser(db, { id: 1, name: "张三", age: 25 });事务一旦创建，可以执行多次请求。事务会自动提交，也可以监听 onerror 进行回滚。
3. 错误处理与关闭连接
连接过程中可能遇到多种错误：版本冲突、权限问题、磁盘空间不足等。推荐统一处理 onerror 和 onblocked 事件。当一个页面以较新版本打开数据库，另一个页面正在使用旧版本时，新版本会触发 onblocked 事件，直到旧版本关闭。
let request = indexedDB.open("myDatabase", 2);
request.onupgradeneeded = function(event) {
let db = event.target.result;
// 更新模式...
};
request.onsuccess = function(event) {
let db = event.target.result;
// 用完记得关闭（非必须，页面关闭时自动释放）
// db.close();
};
request.onerror = function(event) {
console.error("打开数据库错误：", event.target.error);
};
// 当数据库版本升级被其他连接阻塞时触发
request.onblocked = function(event) {
console.warn("数据库被其他页面占用，请关闭所有旧连接后再试");
};在单页应用中，通常将 db 对象保存为全局或模块变量，避免重复打开。但要注意版本号的管理，一旦发布应用，版本号只能递增，不能回退。
4. 检测浏览器支持
虽然现代浏览器基本都支持 IndexedDB，但为了健壮性，应先检测 indexedDB 是否存在。部分私有模式下可能被禁用。
if (!window.indexedDB) {
console.warn("当前浏览器不支持 IndexedDB，请使用其他存储方案");
} else {
// 正常打开数据库
let request = indexedDB.open("myDatabase", 1);
// ...
}5. 完整示例：连接并创建数据库
下面给出一个更完整的示例，包含连接、创建对象存储、插入数据、查询数据的基础框架。该示例可直接在浏览器控制台中运行。
(function() {
if (!window.indexedDB) {
console.error("IndexedDB 不支持");
return;
}
const DB_NAME = "exampleDB";
const DB_VERSION = 1;
const STORE_NAME = "notes";
let request = indexedDB.open(DB_NAME, DB_VERSION);
request.onupgradeneeded = function(event) {
let db = event.target.result;
if (!db.objectStoreNames.contains(STORE_NAME)) {
let store = db.createObjectStore(STORE_NAME, { keyPath: "id", autoIncrement: true });
store.createIndex("titleIndex", "title", { unique: false });
store.createIndex("timestampIndex", "timestamp", { unique: false });
}
console.log("数据库模式创建 / 更新完成");
};
request.onsuccess = function(event) {
let db = event.target.result;
console.log("数据库连接成功，名称：", db.name, "，版本：", db.version);
// 可以在此处进行读写操作
// 示例：添加一条笔记
let transaction = db.transaction(STORE_NAME, "readwrite");
let store = transaction.objectStore(STORE_NAME);
let note = { title: "测试笔记", content: "这是内容", timestamp: Date.now() };
let addRequest = store.add(note);
addRequest.onsuccess = function() {
console.log("笔记添加成功，id 为：", addRequest.result);
};
transaction.oncomplete = function() {
db.close();
console.log("事务完成，数据库连接已关闭");
};
};
request.onerror = function(event) {
console.error("数据库打开失败：", event.target.error.message);
};
})();以上代码演示了从零开始连接 IndexedDB 的完整过程。实际项目中，建议将数据库操作封装成 Promise 或使用库（如 Dexie.js）来简化异步流程。不过，理解底层 IDBRequest 和事件机制仍然是掌握 IndexedDB 的基础。
总结
连接 IndexedDB 主要步骤为：调用 indexedDB.open()，监听 onupgradeneeded 创建模式，在 onsuccess 中获取数据库对象，然后通过事务执行读写。注意：版本号只能递增；模式变更必须在 onupgradeneeded 中完成；若发生版本冲突需处理 onblocked 事件。掌握这些要点，就能在 JavaScript 中稳定地使用 IndexedDB 存储结构化数据。