IndexedDB是浏览器本地数据库，支持索引、事务和异步操作，适用于离线Web应用。通过open创建或打开数据库，onupgradeneeded中定义对象仓库和索引，如users表以id为主键并添加email唯一索引；数据增删改查均在事务中进行，add或put插入/更新记录，get根据主键读取，delete删除数据，还可通过index实现非主键字段高效查询，所有操作异步执行需监听success与error事件，从而实现前端复杂数据持久化。
IndexedDB 是浏览器提供的本地数据库，适合存储大量结构化数据，尤其适用于需要离线工作的 Web 应用。相比 localStorage，它支持索引、事务和异步操作，能处理更复杂的数据场景。
打开数据库并创建对象仓库
使用 IndexedDB 第一步是打开或创建数据库。如果数据库不存在，会自动创建。同时可以定义版本号来管理结构变更。
示例代码：
let db;
const request = indexedDB.open('MyDatabase', 1);
request.onupgradeneeded = function(event) {
db = event.target.result;
// 创建对象仓库（类似表），指定主键
if (!db.objectStoreNames.contains('users')) {
const objectStore = db.createObjectStore('users', { keyPath: 'id' });
// 添加索引便于查询
objectStore.createIndex('email', 'email', { unique: true });
}
};
request.onsuccess = function(event) {
db = event.target.result;
console.log('数据库打开成功');
};
request.onerror = function(event) {
console.error('数据库打开失败:', event.target.error);
};
添加与读取数据
通过事务操作数据，确保一致性。写入和读取都需在事务中进行。
立即学习“Java免费学习笔记（深入）”；
添加数据示例：
function addUser(user) {
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
const request = store.add(user);
request.onsuccess = () => console.log('用户添加成功');
request.onerror = (e) => console.error('添加失败:', e.target.error);
}
// 调用
addUser({ id: 1, name: '张三', email: 'zhang@example.com' });
读取数据示例：
function getUserById(id) {
const transaction = db.transaction(['users'], 'readonly');
const store = transaction.objectStore('users');
const request = store.get(id);
request.onsuccess = function() {
if (request.result) {
console.log('找到用户:', request.result);
} else {
console.log('未找到该用户');
}
};
}
更新与删除数据
修改已有记录或移除数据也通过事务完成。
更新数据：
function updateUser(user) {
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.put(user); // 若主键存在则更新，否则新增
}
删除数据：
function deleteUser(id) {
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.delete(id);
}
查询带索引的数据
利用索引可高效查找非主键字段。
function getUserByEmail(email) {
const transaction = db.transaction(['users'], 'readonly');
const store = transaction.objectStore('users');
const index = store.index('email');
const request = index.get(email);
request.onsuccess = () => {
if (request.result) {
console.log('通过邮箱找到用户:', request.result);
}
};
}
基本上就这些。掌握 open、add、get、put、delete 和索引查询，就能在前端实现较完整的数据持久化能力。注意所有操作都是异步的，合理处理 success 和 error 事件很关键。
