IndexedDB是浏览器内置的事务型NoSQL数据库,支持异步操作、主键索引、大容量存储(可达硬盘50%)及Blob等复杂数据类型,适用于离线应用、缓存、富文本草稿等场景。

IndexedDB 是浏览器内置的、面向客户端的事务型 NoSQL 数据库,专为在网页中持久化存储大量结构化数据而设计。它不是简单的键值对存储(像 localStorage 那样),而是支持对象、Blob、数组甚至嵌套 JSON,并可通过索引快速查询——适合做离线应用、缓存管理、富文本草稿、文件上传队列等。
异步非阻塞:所有操作(打开、读写、遍历)都走事件或 Promise 链,不会卡住页面。
以事务为基础:增删改查必须包裹在 transaction 中,保证操作原子性(全成功或全失败)。
主键 + 索引驱动:每条记录需有唯一主键(keyPath),还能为其他字段建索引(比如 name、email),实现高效条件查询。
容量大且灵活:通常上限是硬盘剩余空间的 50%,远超 localStorage 的 5MB;可存 Blob(图片/视频)、File、普通对象等任意 JS 值。
用 indexedDB.open() 打开或新建数据库,传入名称和版本号(整数):
onupgradeneeded,这时必须创建 objectStore(相当于“表”)和索引onsuccess,拿到 db 实例onupgradeneeded,可安全新增 store 或 index示例关键逻辑:
const request = indexedDB.open('myAppDB', 2);
request.onupgradeneeded = (e) => {
const db = e.target.result;
if (!db.objectStoreNames.contains('notes')) {
const store = db.createObjectStore('notes', { keyPath: 'id', autoIncrement: true });
store.createIndex('byTitle', 'title', { unique: false });
}
};
request.onsuccess = (e) => {
const db = e.target.result; // ✅ 可以用了
};所有操作都在事务中进行,常用模式是:db.transaction([storeName], mode) → 获取 store → 调用方法 → 监听 success/error。
立即学习“Java免费学习笔记(深入)”;
store.add(item),主键由 keyPath 决定(如 id 字段),重复主键会报错store.put(item),主键存在则覆盖,不存在则新增store.get(123)
store.index('byTitle'),再调 index.get('日记')
store.delete(123)
建议封装成 Promise 工具函数,避免层层回调嵌套。
不是所有场景都需要它。优先考虑 IndexedDB 当你遇到这些情况:
小量简单配置(如主题色、语言偏好)还是用 localStorage 更轻便。
基本上就这些。它不复杂但容易忽略事务和版本升级逻辑,写的时候多留心 onupgradeneeded 和 transaction 模式就行。
以上就是JavaScript中什么是IndexedDB_如何使用的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号