IndexedDB是浏览器本地数据库，支持索引、事务和异步操作，适用于离线Web应用。通过open创建或打开数据库，onupgradeneeded中定义对象仓库和索引，如users表以id为主键并添加email唯一索引；数据增删改查均在事务中进行，add或put插入/更新记录，get根据主键读取，delete删除数据，还可通过index实现非主键字段高效查询，所有操作异步执行需监听success与error事件，从而实现前端复杂数据持久化。
IndexedDB 是浏览器提供的本地数据库，适合存储大量结构化数据，尤其适用于需要离线工作的 Web 应用。相比 localStorage，它支持索引、事务和异步操作，能处理更复杂的数据场景。
打开数据库并创建对象仓库
使用 IndexedDB 第一步是打开或创建数据库。如果数据库不存在，会自动创建。同时可以定义版本号来管理结构变更。
示例代码：
let db;const request = indexedDB.open('MyDatabase', 1);request.onupgradeneeded = function(event) { db = event.target.result; // 创建对象仓库（类似表），指定主键 if (!db.objectStoreNames.contains('users')) { const objectStore = db.createObjectStore('users', { keyPath: 'id' }); // 添加索引便于查询 objectStore.createIndex('email', 'email', { unique: true }); }};request.onsuccess = function(event) { db = event.target.result; console.log('数据库打开成功');};request.onerror = function(event) { console.error('数据库打开失败:', event.target.error);};
添加与读取数据
通过事务操作数据，确保一致性。写入和读取都需在事务中进行。
立即学习“Java免费学习笔记（深入）”；
添加数据示例：
function addUser(user) { const transaction = db.transaction(['users'], 'readwrite'); const store = transaction.objectStore('users'); const request = store.add(user); request.onsuccess = () => console.log('用户添加成功'); request.onerror = (e) => console.error('添加失败:', e.target.error);}// 调用addUser({ id: 1, name: '张三', email: 'zhang@example.com' });
读取数据示例：
千博企业网站系统全功能个人版SQL2011 Build 0903
2010.09.03更新优化前台内核处理代码；优化后台内核、静态生成相关代码，生成速度全面提升；修改前台静态模板中所有已知错误；修正后台相关模块所有已知错误；更换后台编辑器，功能更强大；增加系统说明书。免费下载、免费使用、完全无限制。完全免费拥有：应广大用户要求，千博网络全面超值发布企业网站系统个人版程序包：内含Flash动画源码、Access数据库程序包、SQL数据库程序包。全站模块化操作，静态
0 查看详情
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 updateUser(user) { const transaction = db.transaction(['users'], 'readwrite'); const store = transaction.objectStore('users'); store.put(user); // 若主键存在则更新，否则新增}
删除数据：
function deleteUser(id) { const transaction = db.transaction(['users'], 'readwrite'); const store = transaction.objectStore('users'); store.delete(id);}
查询带索引的数据
利用索引可高效查找非主键字段。
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 = () => { if (request.result) { console.log('通过邮箱找到用户:', request.result); } };}
基本上就这些。掌握 open、add、get、put、delete 和索引查询，就能在前端实现较完整的数据持久化能力。注意所有操作都是异步的，合理处理 success 和 error 事件很关键。
以上就是JavaScriptIndexedDB_客户端数据库操作的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/867528.html
微信扫一扫 
支付宝扫一扫 
