IndexedDB 是浏览器内置的异步、事务型客户端数据库，通过对象存储组织数据，支持索引、多种数据类型及版本控制；需用 open() 初始化并处理 onupgradeneeded 创建存储，所有增删改查操作必须在事务中进行。
JavaScript 本身不能直接操作服务端数据库（比如 MySQL、PostgreSQL），它运行在浏览器中，没有权限直连服务器数据库。但浏览器提供了 IndexedDB —— 一个内置的、异步的、支持事务的客户端数据库，适合存储大量结构化数据（如对象、文件、二进制数据）。
IndexedDB 是什么？
IndexedDB 是一种低级 API，不是 SQL 数据库，不支持 SQL 查询语句，而是通过对象存储（Object Store）来组织数据。它支持索引、事务、键值对存取，适合离线应用、缓存、大表单暂存等场景。
关键特点：
- 异步操作，不会阻塞主线程
- 支持事务（readwrite、readonly）保障数据一致性
- 可存储 JS 对象、ArrayBuffer、Blob、File 等原生类型
- 有版本控制机制，升级数据库结构需用
onupgradeneeded
如何打开并初始化 IndexedDB？
使用 window.indexedDB.open() 打开数据库，首次打开会触发 onupgradeneeded 创建对象存储。
立即学习“Java免费学习笔记（深入）”；
示例：创建名为 myAppDB、版本为 1 的数据库，并添加一个叫 users 的对象存储：
const request = indexedDB.open('myAppDB', 1);
request.onerror = () => console.error('打开失败', request.error);
request.onsuccess = () => {
const db = request.result;
console.log('数据库已就绪', db);
};
request.onupgradeneeded = (event) => {
const db = event.target.result;
// 创建对象存储（类似一张表），主键为 'id'
if (!db.objectStoreNames.contains('users')) {
const store = db.createObjectStore('users', { keyPath: 'id' });
// 可选：为 name 字段建立索引，方便按姓名查询
store.createIndex('byName', 'name', { unique: false });
}
};
怎样增删改查数据？
所有操作必须在事务中进行。先获取事务和对象存储，再调用对应方法。
假设已拿到 db 实例：
-
添加数据：
add()（主键冲突会报错）或put()（覆盖同主键） -
读取单条：
get(id) -
按索引查询：
index.get(value)或index.getAll() -
遍历全部：
openCursor() -
删除：
delete(id)
示例：添加一个用户
function addUser(db, user) {
const tx = db.transaction('users', 'readwrite');
const store = tx.objectStore('users');
const req = store.put(user); // user 必须含 id 字段（因 keyPath 是 'id'）
req.onsuccess = () => console.log('用户已保存');
req.onerror = () => console.error('保存失败', req.error);
}
常见注意事项
IndexedDB 容易踩坑，注意这些点：
- 所有回调（success/error）里的
this指向请求对象，推荐用event.target.result或箭头函数避免 this 丢失 - 事务生命周期很短，必须在事件回调里完成操作，否则事务自动关闭
- 不能跨域访问（同源策略限制），localhost 和 127.0.0.1 被视为不同源
- 存储空间有限（通常几十 MB 到几百 MB，取决于浏览器和设备），不适合存超大文件
- 调试可用 Chrome DevTools → Application → IndexedDB 查看内容
基本上就这些。IndexedDB 不复杂但容易忽略事务和版本逻辑，写几个封装函数（如 dbPromise + async/await 包装）能大幅提升开发体验。
