IndexedDB是浏览器中用于存储大量结构化数据的本地数据库，支持异步操作，通过indexedDB.open()创建或打开数据库，并在onupgradeneeded事件中初始化对象仓库和索引；所有增删改查操作均通过事务进行，使用add、put、get、delete方法实现数据管理，结合游标遍历和索引查询可高效检索数据，需注意事务生命周期与错误处理以确保数据一致性。
IndexedDB 是浏览器提供的本地数据库，适合存储大量结构化数据。它支持异步操作，不会阻塞页面，适用于需要离线存储或缓存大量数据的 Web 应用。
打开和初始化数据库
使用 indexedDB.open() 打开数据库，如果数据库不存在则会创建。首次打开时可通过 onupgradeneeded 事件创建对象仓库（类似表）。
const request = indexedDB.open('MyDB', 1);
request.onupgradeneeded = function(event) {
立即学习“Java免费学习笔记（深入）”；
const db = event.target.result;
// 创建对象仓库，keyPath 指定主键
const objectStore = db.createObjectStore('users', { keyPath: 'id' });
// 创建索引便于按字段查询
objectStore.createIndex('email', 'email', { unique: true });
};
request.onsuccess = function(event) {
const db = event.target.result;
console.log('数据库打开成功');
};
request.onerror = function(event) {
console.error('打开失败:', event.target.error);
};
增删改查基本操作
所有操作都通过事务（transaction）进行，需指定操作的对象仓库和权限模式。
添加数据：
function addUser(db, user) {
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
const request = store.add(user);
request.onsuccess = () => console.log('添加成功');
request.onerror = () => console.error('添加失败');
}
读取数据：
function getUser(db, id) {
const transaction = db.transaction(['users'], 'readonly');
const store = transaction.objectStore('users');
const request = store.get(id);
request.onsuccess = () => {
if (request.result) {
console.log('查到用户:', request.result);
} else {
console.log('未找到');
}
};
}
更新数据：
function updateUser(db, user) {
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.put(user); // 主键存在则更新，否则新增
}
删除数据：
function deleteUser(db, id) {
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.delete(id);
}
查询与遍历数据
可使用游标（cursor）遍历所有记录，或通过索引进行条件查询。
// 遍历所有用户
function listUsers(db) {
const transaction = db.transaction(['users'], 'readonly');
const store = transaction.objectStore('users');
const request = store.openCursor();
request.onsuccess = function(event) {
const cursor = event.target.result;
if (cursor) {
console.log('用户:', cursor.value);
cursor.continue(); // 继续下一条
} else {
console.log('遍历结束');
}
};
}
// 使用索引查询
function getUserByEmail(db, 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 和游标遍历，就能完成大多数本地数据管理任务。注意事务生命周期和错误处理，避免数据不一致。不复杂但容易忽略细节。
