IndexedDB是html5提供的浏览器内置数据库，用于存储大量结构化数据。它支持对象、数组、二进制等数据类型，采用异步API避免阻塞ui，具备事务机制与索引查询，适合离线应用和本地缓存场景。通过open()打开数据库，在onupgradeneeded中创建对象仓库和索引，所有增删改查操作在事务中进行。推荐使用idb或Dexie.js等库简化原生API的复杂性，并注意版本控制、错误处理与兼容性问题。掌握IndexedDB可显著提升Web应用的离线能力与性能表现。
在现代Web应用中，当需要在浏览器端存储大量结构化数据时，IndexedDB 是html5提供的强大解决方案。相比 localStorage 只能存储字符串，IndexedDB 支持存储对象、数组、二进制数据（如文件、Blob），适合处理复杂和大量的本地数据，比如离线应用、待同步数据、缓存等。
什么是 IndexedDB？
IndexedDB 是一种低层 API，用于在客户端存储大量结构化数据的浏览器内置数据库。它支持事务型操作、索引查询，并可在主线程外通过异步方式运行，避免阻塞页面。
特点包括：
- 支持结构化数据（对象、数组、日期、File、Blob 等）
- 异步 API，不阻塞 UI
- 支持事务机制，保证数据一致性
- 可创建索引，实现高效查询
- 容量较大（通常为几十MB到数GB，取决于浏览器和设备）
基本使用步骤
要使用 IndexedDB，需经历打开数据库、创建对象仓库、执行增删改查等操作。以下是关键流程的简明说明。
立即学习“前端免费学习笔记（深入）”；
1. 打开或创建数据库
使用 window.indexedDB.open() 打开数据库，如果不存在则会创建。
第二个参数是版本号，升级数据库结构时需递增版本号。
在 onupgradeneeded 事件中定义数据表（即对象仓库）和索引。
request.onupgradeneeded = function(event) { const db = event.target.result; // 创建一个名为 'users' 的对象仓库，主键为 'id' if (!db.objectStoreNames.contains('users')) { const store = db.createObjectStore('users', { keyPath: 'id' }); // 添加索引，便于按姓名查找 store.createIndex('name', 'name', { unique: false }); } };
3. 增删改查操作（CRUD）
所有操作都在事务（transaction）中进行。
添加数据：
request.onsuccess = function(event) { const db = event.target.result; const transaction = db.transaction(['users'], 'readwrite'); const store = transaction.objectStore('users'); store.add({ id: 1, name: 'Alice', email: 'alice@example.com' }); transaction.oncomplete = () => { console.log('数据已保存'); }; };
读取数据：
const transaction = db.transaction(['users'], 'readonly'); const store = transaction.objectStore('users'); const getRequest = store.get(1); getRequest.onsuccess = function() { if (getRequest.result) { console.log('找到用户:', getRequest.result); } else { console.log('未找到该用户'); } };
使用索引查询：
const index = store.index('name'); const search = index.get('Alice'); search.onsuccess = () => { console.log('通过姓名查到:', search.result); };
更新数据：
store.put({ id: 1, name: 'Alice', email: 'newemail@example.com' });
删除数据：
store.delete(1);
封装与简化使用
原生 IndexedDB API 较为繁琐，建议在项目中使用封装库来提升开发效率。
例如使用 idb：
import { openDB } from 'idb'; const db = await openDB('MyAppDB', 1, { upgrade(db) { db.createObjectStore('users', { keyPath: 'id' }); } }); await db.add('users', { id: 1, name: 'Bob' }); const user = await db.get('users', 1);
注意事项与最佳实践
- 始终监听 Error 和 success 事件，及时处理异常
- 版本变更只能在 onupgradeneeded 中修改结构
- 事务在回调结束后自动关闭，不要跨异步操作使用
- 移动端和部分旧浏览器支持有限，注意兼容性（可查 caniuse.com）
- 敏感数据应加密后再存储
基本上就这些。IndexedDB 虽学习曲线略陡，但掌握后能显著提升 Web 应用的离线能力和性能表现。从简单的用户配置到复杂的本地数据管理，它都是值得投入的客户端数据库方案。