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 实例 版本号升级时（比如从 1 → 2），也会触发 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
不是所有场景都需要它。优先考虑 IndexedDB 当你遇到这些情况：
需要离线可用：比如 PWA 应用缓存 API 响应、保存用户未提交的表单 数据量大或结构复杂：笔记内容、编辑器历史、带附件的消息列表 要按字段快速筛选：比如“查所有状态为 draft 的文档”或“找最近 7 天上传的图片” 需存二进制资源：头像 Blob、录音文件、PDF 缓存
小量简单配置（如主题色、语言偏好）还是用 localStorage 更轻便。
基本上就这些。它不复杂但容易忽略事务和版本升级逻辑，写的时候多留心 onupgradeneeded 和 transaction 模式就行。
以上就是JavaScript中什么是IndexedDB_如何使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1541957.html
微信扫一扫 
支付宝扫一扫 
