Firefox 10 作为早期支持 IndexedDB 的浏览器，使用时需注意其可能仍需浏览器前缀（如 mozIndexedDB），但核心 API 与标准一致。前端数据存储的核心知识包括：IndexedDB 是异步 NoSQL 数据库，支持大容量存储（GB 级）、事务处理、索引查询及结构化数据（对象/二进制）。相比 LocalStorage 和 Cookie，它适合离线应用和复杂数据管理。使用时需通过 indexedDB.open 打开数据库，在事务中进行增删改查，并处理版本升级。

IndexedDB

IndexedDB IndexedDB 是一种嵌入浏览器环境的客户端 NoSQL 数据库，作为 W3C 标准，它允许网页脚本在用户本地存储和操作大量结构化数据。随着 WebSQL 被逐步弃用，IndexedDB 已成为 Web 客户端存储事实上的主流标准方案。与 localStorage 等简单存储方案相比，IndexedDB 支持异步事务操作、索引查询、版本控制及大容量存储 (通常不少于 250MB，甚至没有明确上限),并能存储复杂的 JavaScript 对象甚至二进制数据。其核心概念包括数据库、对象存储、索引、事务和游标，通过 indexedDB.open() 方法创建或打开数据库，所有数据操作均在事务内完成，事务提供 readonly、readwrite 和 versionchange 三种模式。IndexedDB 2.0 规范进一步引入了对二进制数据作为索引键、对象存储与索引重命名等新特性。它适用于构建离线 Web 应用、渐进式 Web 应用以及需要复杂数据管理和本地缓存的场景。由于其原生 API 较为复杂，社区存在如 Dexie.js、idb 等封装库以简化开发。研发背景 随着浏览器的功能不断增强，越来越多的网站开始考虑将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。现有的浏览器数据储存方案，都不适合储存大量数据:Cookie 的大小不超过 4KB，且每次请求都会发送回服务器;LocalStorage 在 2.5MB 到 10MB 之间 (各家浏览器不同),而且不提供搜索功能，不能建立自定义的索引。随着 Web 应用复杂度的提升，对客户端数据存储的需求进入了结构化存储时代 (约 2011 年至今)。IndexedDB 的出现正是为了满足这一阶段对复杂数据存储的需求，它提供了远大于 LocalStorage 的存储容量 (通常可达 250MB 以上，依浏览器而异)、异步 API、事务支持以及基于对象存储模型的索引查询能力，使其逐渐成为 PWA(渐进式 Web 应用) 和大型单页应用 (SPA) 的核心数据层。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。发展历程 随着浏览器的功能不断增强，越来越多的网站开始考虑将大量数据储存在客户端，而现有的浏览器数据储存方案如 Cookie 和 LocalStorage 不适合储存大量数据，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。2011 年，Internet Explorer 10 及 Windows JavaScript 应用引入对 Indexed Database API 的支持。此次更新实现了最新版本的 W3C 规范，最显著的更改涉及开发人员更新数据库架构的方式，新的 openAPI 使用一个额外的参数来检测您是想使用当前数据库版本还是想将数据库架构更新为较新的版本，并添加了 IDBCursor.advance(count) 方法以及对 Blob 上的索引属性的支持。（资料日期为 2026 年 3 月 27 日）

IndexedDB 从入门到实战：前端本地大容量存储解决方案

IndexedDB 从入门到实战：前端本地大容量存储解决方案 🚀 一、IndexedDB 核心介绍 1. 什么是 IndexedDB? IndexedDB 是浏览器提供的本地非关系型 (NoSQL) 数据库，属于前端核心存储方案之一，专为解决传统前端存储 (Cookie、LocalStorage) 的容量限制和功能短板设计，支持大容量、结构化数据的本地持久化存储，是前端离线应用、数据缓存、本地业务数据存储的核心技术。在这里插入图片描述 2. 核心特性 ✅大容量存储：无统一官方容量上限，由浏览器根据设备存储空间动态分配 (通常数 GB 级别),远优于 LocalStorage(5MB 左右) 和 Cookie(4KB 左右); ✅非关系型 (NoSQL):以键值对为核心存储结构，支持存储对象、数组等结构化数据 (无需手动序列化，浏览器自动处理); ✅异步操作：所有核心操作 (增删改查、库/表创建) 均为异步，不会阻塞浏览器主线程，避免页面卡顿，这是与 LocalStorage(同步) 的关键区别; ✅事务支持：所有数据操作必须在事务中执行，保证操作的原子性 (要么全部成功，要么全部失败),避免数据不一致; ✅索引支持：可对对象仓库的指定字段创建索引，大幅提升数据查询效率，解决海量数据下的查询性能问题; ✅持久化存储：数据默认持久化，除非手动删除或清除浏览器缓存，关闭页面/浏览器后数据不会丢失; ✅跨域限制：遵循同源策略，仅能访问当前域名下创建的 IndexedDB 数据库，保证数据安全性。3. 与传统前端存储的对比

使用 IndexedDB

使用 IndexedDB 使用 indexeddb indexeddb 提供了在浏览器上储存保留资料的功能，藉由它，不论是线上或线下我们的应用都可以进行资料存取。in this article 关於本文基本操作步骤建立和结构资料库新增和删除资料移除资料读取资料使用指标 (cursor) 当网页应用程式於浏览器另一个分页开启时变更版本安全性浏览器关闭风险完整 indexeddb 范例下一步延伸阅读 关於本文 本文会带领各位操作非同步 indexeddb 的 api，如果不知道甚麼是 indexeddb，请先看看 "indexeddb 基本础念" 。基本操作步骤 操作 indexeddb 的基本步骤建议如下：开启资料库和交易 (transaction)。建立物件存档 (object store) 发出资料库操作请求，例如新增或取得资料。聆听对应 dom 事件等待操作完成。从 result 物件上取得结果进行其他工作。好了，知道了上述概念后，我们可以来实际做些甚麼。建立和结构资料库 由於 indexeddb 的标准仍在演进，所以目前一些实作还需要加上浏览器前缀标示 (如 gecko 基础浏览器的前缀标示为 moz，webkit 基础浏览器的前缀标示为 webkit),浏览器的实作也可能会有所差异，不过一旦共识标准达成，无浏览器前缀标示实作将出现。其实，internet explorer 10, firefox 16, chrome 24 已经有了无浏览器前缀标示实作。操作实验性质的 indexeddb 如果需要试验浏览器的前缀标示，可以如下：js // in the following line, you should include the prefixes of implementations you want to test. window.indexeddb = window.indexeddb || window.mozindexeddb || window.webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = " if you're not in a function. // moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction（消息于 2025 年 11 月 16 日发布）

FAQ

IndexedDB 支持哪些浏览器？

主流浏览器如 Chrome、Firefox、Opera、Safari 完全支持，IE10/11 和 Edge 部分支持。

为什么选择 IndexedDB 而不是 LocalStorage？

因为 IndexedDB 支持更大容量、异步操作、索引查询及结构化数据存储，适合复杂应用。

如何打开一个 IndexedDB 数据库？

使用 indexedDB.open() 方法，指定数据库名称和版本号，并监听 onsuccess 和 onupgradeneeded 事件。