IndexedDB 是 html 5 提供的 浏览器 内置 数据库 ，用于存储大量结构化数据。它支持 对象 、数组、二进制等 数据类型 ，采用 异步 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 应用的离线能力和性能表现。从简单的用户配置到复杂的本地数据管理，它都是值得投入的客户端数据库方案。
