IndexedDB通过增删改查操作实现浏览器端大量结构化数据存储。首先打开数据库并创建对象仓库；接着使用事务添加数据；然后可按主键查询或遍历所有数据；支持获取记录后更新字段；还能根据主键删除指定数据，适用于离线应用与大数据处理场景。
HTML5 提供了多种客户端存储方式，其中 IndexedDB 是一种强大且灵活的低级 API，用于在用户浏览器中存储大量结构化数据，包括二进制数据（如图片、文件等）。它适合需要离线功能或处理大量数据的 Web 应用。下面介绍如何使用 IndexedDB 实现增删改查操作。
1. 打开数据库并创建对象仓库
在使用 IndexedDB 之前，必须先打开数据库并定义一个对象仓库（类似表）来存储数据。
const request = indexedDB.open('MyDatabase', 1);
let db;
request.onupgradeneeded = function(event) {
db = event.target.result;
// 创建名为 users 的对象仓库，主键为 id
if (!db.objectStoreNames.contains('users')) {
db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
}
};
request.onsuccess = function(event) {
db = event.target.result;
};
request.onerror = function(event) {
console.error('数据库打开失败:', event.target.error);
};
2. 添加数据（增）
使用事务将新记录插入到对象仓库中。
function addUser(name, email) {
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
const user = { name, email }; // id 会自动递增
const addRequest = store.add(user);
addRequest.onsuccess = function() {
console.log('用户添加成功，ID:', addRequest.result);
};
addRequest.onerror = function() {
console.error('添加失败:', addRequest.error);
};
}
// 使用示例
addUser('张三', 'zhangsan@example.com');
3. 查询数据（查）
支持按主键查询单条数据，或遍历所有数据。
立即学习“前端免费学习笔记（深入）”；
// 按 ID 查询单个用户
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('未找到 ID 为', id, '的用户');
}
};
}
// 查询所有用户
function getAllUsers() {
const transaction = db.transaction(['users'], 'readonly');
const store = transaction.objectStore('users');
const request = store.getAll();
request.onsuccess = function() {
console.log('所有用户:', request.result);
};
}
// 使用示例
getUserById(1);
getAllUsers();
4. 更新数据（改）
通过主键找到记录并更新其内容。
function updateUser(id, name, email) {
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 = name;
user.email = email;
const updateReq = store.put(user); // 保存更新
updateReq.onsuccess = () => console.log('更新成功');
} else {
console.log('用户不存在');
}
};
}
// 使用示例
updateUser(1, '李四', 'lisi@example.com');
5. 删除数据（删）
根据主键删除指定记录。
function deleteUser(id) {
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
const request = store.delete(id);
request.onsuccess = function() {
console.log('用户删除成功');
};
request.onerror = function() {
console.error('删除失败:', request.error);
};
}
// 使用示例
deleteUser(1);
基本上就这些。IndexedDB 虽然 API 较为复杂，但功能强大，适用于需要持久化存储和高性能查询的场景。掌握它的基本增删改查操作是开发离线 Web 应用的重要一步。
