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风格更便于使用。
以上就是HTML5怎么使用IndexedDB_HTML5数据库操作教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1589012.html
微信扫一扫 
支付宝扫一扫 
