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()打开数据库，若不存在则自动创建。
<font face="Courier New,Courier,monospace">const request = indexedDB.open('MyDB', 1);</font>
2. 处理数据库升级（onupgradeneeded）
当数据库版本变化或首次创建时触发，用于定义数据结构。
<font face="Courier New,Courier,monospace">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 }); } };</font>
3. 操作数据：添加记录
在事务中向对象仓库添加数据。
<font face="Courier New,Courier,monospace">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('事务失败'); };</font>
查询与读取数据
可以通过主键或索引高效获取数据。
按主键读取
<font face="Courier New,Courier,monospace">const transaction = db.transaction(['users'], 'readonly'); const store = transaction.objectStore('users'); const getRequest = store.get(1); getRequest.onsuccess = function() { console.log('查到用户:', getRequest.result); };</font>
使用索引查询
<font face="Courier New,Courier,monospace">const index = store.index('email'); const emailRequest = index.get('alice@example.com'); emailRequest.onsuccess = function() { console.log('通过邮箱查到:', emailRequest.result); };</font>
遍历所有记录
<font face="Courier New,Courier,monospace">store.openCursor().onsuccess = function(event) { const cursor = event.target.result; if (cursor) { console.log('用户:', cursor.value); cursor.continue(); } };</font>
更新与删除数据
更新和删除也需在事务中进行。
更新记录
<font face="Courier New,Courier,monospace">store.put({ id: 1, name: 'Alice Smith', email: 'alice.smith@example.com' });</font>
删除记录
<font face="Courier New,Courier,monospace">store.delete(1);</font>
操作完成后，记得关闭数据库连接：db.close();
基本上就这些。IndexedDB虽然API略显繁琐，但配合Promise封装或使用如idb这样的轻量库（google推荐），可以大幅简化代码。掌握它，能让你的Web应用真正具备离线能力与高性能本地存储。