IndexedDB是浏览器内置的NoSQL数据库，支持事务和索引，适用于存储大量结构化数据。首先通过indexedDB.open创建或打开数据库，并在onupgradeneeded事件中定义对象仓库和索引；成功后可在onsuccess中获取数据库实例。增删改查操作需通过事务进行：使用add()或put()添加数据，get()按主键读取，index()结合get()实现索引查询，getAll()遍历所有记录，put()更新数据，delete()删除记录。核心在于理解事务作用域与版本升级机制，虽API较复杂，但可通过Promise封装或使用idb等库简化操作。
IndexedDB 是浏览器内置的一个 NoSQL 数据库存储方案，适合在客户端存储大量结构化数据，比如文件、对象等。它支持事务处理、索引查询，适用于离线应用或需要高性能本地缓存的场景。虽然 API 看起来复杂，但掌握基本操作后使用起来并不难。
打开数据库并创建对象仓库
使用 IndexedDB 第一步是打开数据库连接。如果数据库不存在，会自动创建。通过 onupgradeneeded 事件来定义或更新数据结构（即对象仓库）。
示例代码：
let db;
const request = indexedDB.open('MyDatabase', 1);
request.onupgradeneeded = function(event) {
db = event.target.result;
// 创建一个对象仓库，keyPath 表示主键
if (!db.objectStoreNames.contains('users')) {
const objectStore = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
// 添加索引便于按字段查询
objectStore.createIndex('email', 'email', { unique: true });
objectStore.createIndex('name', 'name');
}
};
request.onsuccess = function(event) {
db = event.target.result;
console.log('数据库打开成功');
};
request.onerror = function(event) {
console.error('数据库打开失败:', event.target.error);
};
添加和读取数据
在获取到数据库实例后，可以通过事务进行增删改查操作。写入数据使用 add() 或 put() 方法。
立即学习“Java免费学习笔记（深入）”；
示例：添加用户数据
function addUser(name, email) {
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
const user = { name, email };
const request = store.add(user);
request.onsuccess = () => console.log('用户添加成功');
request.onerror = () => console.error('添加失败:', request.error);
}
读取单条数据可通过主键：
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 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);
}
};
}
也可以遍历所有数据：
function getAllUsers() {
const transaction = db.transaction(['users'], 'readonly');
const store = transaction.objectStore('users');
const request = store.getAll();
request.onsuccess = () => console.log('所有用户:', request.result);
}
更新与删除数据
更新数据使用 put()，传入已有主键的对象即可覆盖原记录。
function updateUser(id, newName) {
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
const request = store.get(id);
request.onsuccess = function() {
const user = request.result;
if (user) {
user.name = newName;
store.put(user);
}
};
}
删除数据使用 delete()：
function deleteUser(id) {
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
const request = store.delete(id);
request.onsuccess = () => console.log('用户已删除');
}
基本上就这些核心操作。IndexedDB 功能强大，虽然异步回调写法略显繁琐，配合 Promise 封装或使用库（如 idb）会更简洁。关键是理解事务作用域和版本升级机制，避免常见错误。
