IndexedDB是浏览器中用于存储大量结构化数据的本地数据库，支持异步操作，通过indexedDB.open()创建或打开数据库，并在onupgradeneeded事件中初始化对象仓库和索引；所有增删改查操作均通过事务进行，使用add、put、get、delete方法实现数据管理，结合游标遍历和索引查询可高效检索数据，需注意事务生命周期与错误处理以确保数据一致性。
IndexedDB 是浏览器提供的本地数据库，适合存储大量结构化数据。它支持异步操作，不会阻塞页面，适用于需要离线存储或缓存大量数据的 Web 应用。
打开和初始化数据库
使用 indexedDB.open() 打开数据库，如果数据库不存在则会创建。首次打开时可通过 onupgradeneeded 事件创建对象仓库（类似表）。
const request = indexedDB.open(‘MyDB’, 1);
request.onupgradeneeded = function(event) {
立即学习“Java免费学习笔记（深入）”；
const db = event.target.result;
// 创建对象仓库，keyPath 指定主键
const objectStore = db.createObjectStore(‘users’, { keyPath: ‘id’ });
// 创建索引便于按字段查询
objectStore.createIndex(’email’, ’email’, { unique: true });
};
request.onsuccess = function(event) {
const db = event.target.result;
console.log(‘数据库打开成功’);
};
request.onerror = function(event) {
console.error(‘打开失败:’, event.target.error);
};
增删改查基本操作
所有操作都通过事务（transaction）进行，需指定操作的对象仓库和权限模式。
添加数据：
function addUser(db, user) {
const transaction = db.transaction([‘users’], ‘readwrite’);
const store = transaction.objectStore(‘users’);
const request = store.add(user);
request.onsuccess = () => console.log(‘添加成功’);
request.onerror = () => console.error(‘添加失败’);
}
读取数据：
function getUser(db, id) {
const transaction = db.transaction([‘users’], ‘readonly’);
const store = transaction.objectStore(‘users’);
const request = store.get(id);
request.onsuccess = () => {
if (request.result) {
console.log(‘查到用户:’, request.result);
} else {
console.log(‘未找到’);
}
};
}
更新数据：
库宝AI
库宝AI是一款功能多样的智能伙伴助手，涵盖AI写作辅助、智能设计、图像生成、智能对话等多个方面。
109 查看详情 
function updateUser(db, user) {
const transaction = db.transaction([‘users’], ‘readwrite’);
const store = transaction.objectStore(‘users’);
store.put(user); // 主键存在则更新，否则新增
}
删除数据：
function deleteUser(db, id) {
const transaction = db.transaction([‘users’], ‘readwrite’);
const store = transaction.objectStore(‘users’);
store.delete(id);
}
查询与遍历数据
可使用游标（cursor）遍历所有记录，或通过索引进行条件查询。
// 遍历所有用户
function listUsers(db) {
const transaction = db.transaction([‘users’], ‘readonly’);
const store = transaction.objectStore(‘users’);
const request = store.openCursor();
request.onsuccess = function(event) {
const cursor = event.target.result;
if (cursor) {
console.log(‘用户:’, cursor.value);
cursor.continue(); // 继续下一条
} else {
console.log(‘遍历结束’);
}
};
}
// 使用索引查询
function getUserByEmail(db, 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);
}
};
}
基本上就这些。掌握 open、add、get、put、delete 和游标遍历，就能完成大多数本地数据管理任务。注意事务生命周期和错误处理，避免数据不一致。不复杂但容易忽略细节。
以上就是JavaScript IndexedDB数据库操作的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/312117.html
微信扫一扫 
支付宝扫一扫 
