在现代 前端Web 开发中，随着应用程序复杂度的逐步增加，本地存储的需求也越来越高频。
虽然 localStorage 和 sessionStorage 可以满足一些简单的数据存储需求，但当需要存储大量结构化数据或进行复杂查询时，它们就显得力不从心了。
这时候，IndexedDB 就成为了一个强大的选择。
本文将带你全面了解 IndexedDB 的基础使用，助你在项目中灵活应用。
IndexedDB 是什么？为啥要用它？
IndexedDB 是浏览器内置的一个 NoSQL 数据库。它和传统的关系型数据库不同，更像是一个键值对存储，但功能更强大。
如果与传统的localStorage 相比，它有以下优点：
开始使用
indexDB 其实是 window 对象的一个属性。 也就是全局变量。 因此我们可以在控制台直接输出
通过在控制台中输出 indexDB 对象，我们可以一目了然地看到它所提供的各种方法。
1.打开和创建数据库
const dbVersion = 1;
const request = indexedDB.open('myDatabase', dbVersion);
request.onerror = (event) => { console.error('数据库打开失败', event.target.error);};
request.onsuccess = (event) => { const db = event.target.result; console.log('数据库打开成功');};
request.onupgradeneeded = (event) => { const db = event.target.result;
if (!db.objectStoreNames.contains('books')) { const store = db.createObjectStore('books', { keyPath: 'id', autoIncrement: true });
store.createIndex('title_idx', 'title', { unique: false }); store.createIndex('author_idx', 'author', { unique: false }); store.createIndex('price_idx', 'price', { unique: false }); }};
让我们来详细了解一下 open() 方法的两个参数：
- 第一个参数(必传)：数据库名称。用于指定你要打开或创建的数据库的名称。
- 第二个参数(可选)：数据库版本号。不传默认值为 1。
版本号是一个重要的机制，用于管理数据库的更新和变更。
当我们尝试打开一个数据库时，系统会检查当前是否存在该数据库：
如果数据库不存在，IndexedDB 会自动创建一个新的数据库，并将其版本号初始化为 1。
如果数据库已存在，则会根据传入的版本号与当前保存的版本号进行比较：
如果传入的版本号比当前版本更高，IndexedDB 会触发upgradeneeded事件，此时开发者可以在事件回调中执行数据库的更新操作（例如创建、修改或删除对象存储表）。
传入的版本号不能低于当前版本号，因为 IndexedDB 的版本号是单向递增的，不允许回退到旧版本。
2.添加数据
获取到存储对象后, 就可以调用它提供的 add 方法来新增数据。
const book = { title: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas', price: 99.8, publishYear: 2025};const transaction = db.transaction(['books'], 'readwrite');const store = transaction.objectStore('books');const request = store.add(book);request.onsuccess = (event) => { const books = event.target.result; console.log(`${author}的书籍:`, books);};
3.更新数据
要更新数据，可以使用put()方法。使用 put 方法更新数据时，如果数据不存在则会添加。
function updateBook(db, book) { const transaction = db.transaction(['books'], 'readwrite'); const store = transaction.objectStore('books');
const request = store.put(book);
request.onsuccess = () => { console.log('更新成功'); };}
4.删除数据
通过delete方法删除单个条目或者clear 方法删除整个对象。
使用 delete 方法删除数据时, 需要传入主键, 根据主键删除。
function deleteBook(db, id) { const transaction = db.transaction(['books'], 'readwrite'); const store = transaction.objectStore('books');
const request = store.delete(id);
request.onsuccess = () => { console.log('删除成功'); };}
3. 查询数据
通过 get 方法或游标查询数据。使用get方法需要传入主键id
function getBook(db, id) { const transaction = db.transaction(['books']); const store = transaction.objectStore('books');
const request = store.get(id);
request.onsuccess = (event) => { const book = event.target.result; console.log('查询结果:', book); };}
当然除了通过主键ID查询，IndexedDB 还支持索引查询
function getBooksByAuthor(db, author) { const transaction = db.transaction(['books']); const store = transaction.objectStore('books'); const index = store.index('author_idx');
const request = index.getAll(author);
request.onsuccess = (event) => { const books = event.target.result; console.log(`${author}的书籍:`, books); };}
上面介绍了IndexedDB 核心概念以及基础的增、删、改，查等功能。
当然IndexedDB 远不止这些功能，如果构建一个对本地存储有要求，大容量数据的前端应用，IndexedDB 都能成为你的得力助手!
该文章在 2026/5/20 13:01:15 编辑过
400 186 1886
