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() 打开数据库，如果不存在则会创建。
const request = indexedDB.open('MyAppDB', 1);
第二个参数是版本号，升级数据库结构时需递增版本号。
NetShop软件特点介绍： 1、使用ASP.Net(c#)2.0、多层结构开发 2、前台设计不采用任何.NET内置控件读取数据，完全标签化模板处理，加快读取速度3、安全的数据添加删除读取操作，利用存储过程模式彻底防制SQL注入式攻击4、前台架构DIV+CSS兼容IE6,IE7,FF等，有利于搜索引挚收录5、后台内置强大的功能，整合多家网店系统的功能，加以优化。6、支持三种类型的数据库：Acces
在 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：轻量级 Promise 封装，推荐使用
- Dexie.js：功能丰富的高级封装，支持链式语法
例如使用 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 应用的离线能力和性能表现。从简单的用户配置到复杂的本地数据管理，它都是值得投入的客户端数据库方案。
