JavaScript中什么是IndexedDB_如何使用

苏承栈

2026-09-10 • 👁 0人浏览过

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免费学习笔记（深入） ”； Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载新增：用

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 模式就行。

相关文章