前端数据库 IndexedDB 的核心概念，包括数据库、对象存储、索引、事务和游标。通过完整的联系人管理器代码示例，展示了如何初始化数据库、添加、查询、更新和删除数据，以及如何使用游标进行高级遍历。相比 localStorage，IndexedDB 更适合存储大量结构化数据和实现复杂的离线 Web 应用需求。
在现代 Web 开发中，我们经常需要处理大量结构化数据。传统的 localStorage 和 sessionStorage 虽然简单易用，但只能存储少量字符串数据，无法满足复杂应用的需求。IndexedDB 应运而生——这是一个功能强大的浏览器内置数据库，支持存储大量结构化数据，提供索引、事务等高级功能，是实现离线应用、缓存机制和复杂数据处理的理想选择。
// 打开或创建数据库
const dbName = 'ContactDB';
const dbVersion = 1;
const request = indexedDB.open(dbName, dbVersion);
request.onerror = (event) => {
console.error('数据库打开失败:', event.target.error);
};
request.onupgradeneeded = (event) => {
const db = event.target.result;
// 创建对象存储（如果不存在）
if (!db.objectStoreNames.contains('contacts')) {
const store = db.createObjectStore('contacts', {
keyPath: 'id',
autoIncrement: true
});
// 创建索引
store.createIndex('name', 'name', { unique: false });
store.createIndex('email', 'email', { unique: true });
store.createIndex('phone', 'phone', { unique: false });
store.createIndex('group', 'group', { unique: false });
}
};
request.onsuccess = (event) => {
const db = event.target.result;
console.log('数据库成功打开');
// 存储数据库引用供后续使用
window.contactDB = db;
};
function addContact(contact) {
return new Promise((resolve, reject) => {
const tx = window.contactDB.transaction(['contacts'], 'readwrite');
const store = tx.objectStore('contacts');
const request = store.add(contact);
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}
function getContact(id) {
return new Promise((resolve, reject) => {
const tx = window.contactDB.transaction(['contacts'], 'readonly');
const store = tx.objectStore('contacts');
const request = store.get(id);
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}
function searchByName(name) {
return new Promise((resolve, reject) => {
const tx = window.contactDB.transaction(['contacts'], 'readonly');
const store = tx.objectStore('contacts');
const index = store.index('name');
const request = index.getAll(name);
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}
function updateContact(contact) {
return new Promise((resolve, reject) => {
const tx = window.contactDB.transaction(['contacts'], 'readwrite');
const store = tx.objectStore('contacts');
const request = store.put(contact);
request.onsuccess = () => resolve();
request.onerror = () => reject(request.error);
});
}
function deleteContact(id) {
return new Promise((resolve, reject) => {
const tx = window.contactDB.transaction(['contacts'], 'readwrite');
const store = tx.objectStore('contacts');
const request = store.delete(id);
request.onsuccess = () => resolve();
request.onerror = () => reject(request.error);
});
}
function listAllContacts() {
return new Promise((resolve, reject) => {
const tx = window.contactDB.transaction(['contacts'], 'readonly');
const store = tx.objectStore('contacts');
const cursorRequest = store.openCursor();
const results = [];
cursorRequest.onsuccess = (event) => {
const cursor = event.target.result;
if (cursor) {
results.push(cursor.value);
cursor.continue();
} else {
resolve(results);
}
};
cursorRequest.onerror = () => reject(cursorRequest.error);
});
}
IndexedDB 在现代浏览器中均有良好支持，包括 Chrome、Firefox、Safari 和 Edge。对于旧版 IE 不支持，但在当前主流开发环境中通常无需考虑兼容性问题。
虽然原生 API 功能强大，但异步回调嵌套较深。可以使用 Dexie.js 等第三方库来简化操作，提供更友好的 Promise 接口。
IndexedDB 是前端开发中处理复杂数据结构的重要工具。通过理解其核心概念并掌握基本操作方法，开发者可以构建出功能丰富且体验流畅的离线 Web 应用。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online