IndexedDB是浏览器内置的NoSQL数据库，支持异步操作、事务处理和存储复杂数据类型，适用于离线应用与高性能本地存储。通过open()创建或打开数据库，在onupgradeneeded中定义对象仓库和索引，使用事务进行增删改查，支持主键和索引查询，并可遍历记录，结合Promise封装可简化API使用。
前端数据存储在现代Web应用中非常重要，尤其是当需要离线工作或提升性能时。IndexedDB是一种强大且灵活的浏览器内建数据库，适合存储大量结构化数据，包括文件和二进制对象（Blob）。相比localStorage，它支持索引、事务处理和异步操作，更适合复杂场景。
什么是IndexedDB？
IndexedDB是浏览器提供的一个低层级API，用于在客户端存储大量结构化数据。它是一个NoSQL类型的数据库，数据以“对象仓库”（Object Store）的形式组织，支持通过主键或索引快速查找记录。
关键特性：
异步操作，不会阻塞UI 支持事务机制，保证数据一致性 可存储对象、数组、File、Blob等复杂类型 容量较大（通常为几十MB到无限，取决于浏览器和用户授权）
基本使用步骤
要使用IndexedDB，需经过打开数据库、创建对象仓库、执行增删改查等步骤。以下是核心流程示例：
立即学习“Java免费学习笔记（深入）”；
1. 打开或创建数据库
使用window.indexedDB.open()打开数据库，若不存在则自动创建。
const request = indexedDB.open('MyDB', 1);
2. 处理数据库升级（onupgradeneeded）
当数据库版本变化或首次创建时触发，用于定义数据结构。
request.onupgradeneeded = function(event) { const db = event.target.result; if (!db.objectStoreNames.contains('users')) { const objectStore = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true }); objectStore.createIndex('email', 'email', { unique: true }); }};
3. 操作数据：添加记录
在事务中向对象仓库添加数据。
request.onsuccess = function(event) { const db = event.target.result; const transaction = db.transaction(['users'], 'readwrite'); const store = transaction.objectStore('users'); store.add({ name: 'Alice', email: 'alice@example.com' }); transaction.oncomplete = () => console.log('数据已保存'); transaction.onerror = () => console.error('事务失败');};
查询与读取数据
可以通过主键或索引高效获取数据。
按主键读取
const transaction = db.transaction(['users'], 'readonly');const store = transaction.objectStore('users');const getRequest = store.get(1);getRequest.onsuccess = function() { console.log('查到用户:', getRequest.result);};
使用索引查询
const index = store.index('email');const emailRequest = index.get('alice@example.com');emailRequest.onsuccess = function() { console.log('通过邮箱查到:', emailRequest.result);};
遍历所有记录
store.openCursor().onsuccess = function(event) { const cursor = event.target.result; if (cursor) { console.log('用户:', cursor.value); cursor.continue(); }};
更新与删除数据
更新和删除也需在事务中进行。
更新记录
store.put({ id: 1, name: 'Alice Smith', email: 'alice.smith@example.com' });
删除记录
store.delete(1);
操作完成后，记得关闭数据库连接：db.close();
基本上就这些。IndexedDB虽然API略显繁琐，但配合Promise封装或使用如idb这样的轻量库（Google推荐），可以大幅简化代码。掌握它，能让你的Web应用真正具备离线能力与高性能本地存储。
以上就是使用IndexedDB进行前端数据存储_javascript技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1534493.html
微信扫一扫 
支付宝扫一扫 
