IndexedDB是HTML5的浏览器端NoSQL数据库，用于存储大量结构化数据。通过open创建或打开数据库，在onupgradeneeded中定义对象仓库和索引；使用readwrite事务添加、更新、删除数据，readonly事务读取或遍历数据；支持主键操作与索引查询，适合离线应用持久化存储，实际开发可结合localForage等库简化API操作。
IndexedDB 是 HTML5 提供的一个浏览器端的 NoSQL 数据库，适合存储大量结构化数据，比如文件、图片的元信息，或者离线应用中的用户数据。它支持事务操作、索引查询，能在客户端持久化保存数据，不依赖网络。下面介绍它的基本使用方法和实际操作示例。
打开数据库并创建对象仓库
使用 IndexedDB 第一步是打开或创建一个数据库。如果数据库不存在，会自动创建。
let db;const request = indexedDB.open("MyDatabase", 1); // 数据库名和版本号request.onerror = function(event) { console.log("数据库打开失败");};request.onsuccess = function(event) { db = event.target.result; console.log("数据库打开成功");};// 只在数据库首次创建或版本更新时触发request.onupgradeneeded = function(event) { db = event.target.result; // 创建一个对象仓库（类似表） if (!db.objectStoreNames.contains("users")) { const objectStore = db.createObjectStore("users", { keyPath: "id", autoIncrement: true }); // 添加索引便于查询 objectStore.createIndex("email", "email", { unique: true }); objectStore.createIndex("name", "name", { unique: false }); }};
说明： onupgradeneeded 是定义数据结构的关键时机，只能在这里创建或删除对象仓库和索引。keyPath 指定主键字段，autoIncrement 表示主键自增。
添加数据（新增记录）
通过事务向对象仓库中插入数据。
立即学习“前端免费学习笔记（深入）”；
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 = function() { console.log("用户添加成功，ID:", request.result); }; request.onerror = function() { console.log("添加失败，可能是邮箱重复"); };}// 使用示例addUser("张三", "zhangsan@example.com");
注意： 必须开启 readwrite 事务才能写入数据。若字段设置了 unique: true（如 email），重复值会触发错误。
读取与查询数据
支持按主键读取、按索引查询、遍历所有记录等操作。
按主键读取：
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 = function() { if (request.result) { console.log("通过邮箱找到用户:", request.result); } };}
遍历所有数据：
function listAllUsers() { const transaction = db.transaction(["users"], "readonly"); const store = transaction.objectStore("users"); store.openCursor().onsuccess = function(event) { const cursor = event.target.result; if (cursor) { console.log("用户:", cursor.value); cursor.continue(); // 继续下一条 } else { console.log("遍历完成"); } };}
更新与删除数据
修改或移除已有记录也很简单。
更新数据：
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; const updateRequest = store.put(user); updateRequest.onsuccess = () => console.log("更新成功"); } };}
删除数据：
function deleteUser(id) { const transaction = db.transaction(["users"], "readwrite"); const store = transaction.objectStore("users"); const request = store.delete(id); request.onsuccess = function() { console.log("删除成功"); };}
基本上就这些。掌握 open、add、get、put、delete 和游标遍历，就能应对大多数前端本地存储需求。IndexedDB 功能强大但 API 较底层，实际项目中可结合封装库如 localForage 简化操作。关键是理解事务机制和异步流程控制。
以上就是HTML5IndexedDB怎么使用_HTML5IndexedDB数据库的操作方法与实例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1598520.html
微信扫一扫 
支付宝扫一扫 
