IndexedDB是html5中用于浏览器内持久化存储大量结构化数据的低级API,支持事务操作,适用于需要离线功能的复杂应用。通过indexedDB.open()方法可创建或打开数据库,若数据库版本更新或首次创建会触发onupgradeneeded事件,在此可定义对象仓库(Object store)和索引。例如创建“users”表并设置主键“id”,添加name和email索引。数据操作需在事务中进行:使用transaction()开启读写事务,调用add()插入数据,注意主键冲突;通过get()按主键查询,或利用索引index()实现条件查找;更新用put()覆盖原记录,删除用delete()移除指定主键数据;还可通过openCursor()遍历所有数据。所有操作均为异步,依赖事件回调处理结果,建议封装为promise以提升代码可维护性。

html5中的IndexedDB是一种在用户浏览器中存储大量结构化数据的低级API,适合处理需要离线使用的复杂应用。它支持事务型操作,能高效地对数据进行增删改查。下面介绍如何使用IndexedDB进行基本的数据库操作。
创建或打开数据库
使用indexedDB.open()方法可以打开一个已有数据库,若不存在则会创建一个新的。
示例代码:
let request = indexedDB.open(“MyDatabase”, 1);
request.onerror = function(Event) {
console.log(“无法打开数据库”);
};
request.onsuccess = function(event) {
db = event.target.result;
console.log(“数据库打开成功”);
};
首次创建时,会触发onupgradeneeded事件,在该事件中定义数据表(object store)和索引。
立即学习“前端免费学习笔记(深入)”;
例如:
request.onupgradeneeded = function(event) {
let db = event.target.result;
let objectStore = db.createObjectStore(“users”, { keyPath: “id” });
objectStore.createIndex(“name”, “name”, { unique: false });
objectStore.createIndex(“email”, “email”, { unique: true });
};
这里创建了一个名为“users”的对象仓库,主键为“id”,并添加了两个索引。
添加数据(新增记录)
插入数据需在事务中进行。先开启一个读写事务,再获取对象仓库,调用add()方法。
示例:
function addUser(db, user) {
let transaction = db.transaction([“users”], “readwrite”);
let store = transaction.objectStore(“users”);
let request = store.add(user);
request.onsuccess = function() {
console.log(“用户添加成功”);
};
request.onerror = function() {
console.log(“添加失败,可能主键冲突”);
};
}
调用方式:addUser(db, {id: 1, name: “张三”, email: “zhang@example.com”})
读取数据(查询记录)
通过主键读取单条数据:
function getUserById(db, id) {
let transaction = db.transaction([“users”]);
let store = transaction.objectStore(“users”);
let request = store.get(id);
request.onsuccess = function() {
if (request.result) {
console.log(“找到用户:”, request.result);
} else {
console.log(“未找到用户”);
}
};
}
使用索引查询:
let index = store.index(“name”);
index.get(“张三”).onsuccess = function(event) {
console.log(“通过姓名查到:”, event.target.result);
};
更新和删除数据
更新一条记录使用put()方法,会根据主键覆盖原有数据:
let transaction = db.transaction([“users”], “readwrite”);
let store = transaction.objectStore(“users”);
store.put({id: 1, name: “李四”, email: “li@example.com”});
删除数据使用delete()方法:
store.delete(1); // 删除主键为1的记录
也可通过游标遍历所有数据:
let cursorRequest = store.openCursor();
cursorRequest.onsuccess = function(event) {
let cursor = event.target.result;
if (cursor) {
console.log(“遍历:”, cursor.value);
cursor.continue();
}
};
基本上就这些。掌握这些基础操作后,就能在前端实现本地持久化存储。注意所有操作都是异步的,需通过事件回调处理结果。不复杂但容易忽略错误处理和事务边界。实际开发中建议封装成Promise风格更便于使用。


