IndexedDB是浏览器内置的NoSQL数据库，支持异步操作、事务处理和存储复杂数据类型，适用于离线应用与高性能本地存储。通过open()创建或打开数据库，在onupgradeneeded中定义对象仓库和索引，使用事务进行增删改查，支持主键和索引查询，并可遍历记录，结合Promise封装可简化API使用。
前端数据存储在现代Web应用中非常重要，尤其是当需要离线工作或提升性能时。IndexedDB是一种强大且灵活的浏览器内建数据库，适合存储大量结构化数据，包括文件和二进制对象（Blob）。相比localStorage，它支持索引、事务处理和异步操作，更适合复杂场景。
什么是IndexedDB？
IndexedDB是浏览器提供的一个低层级API，用于在客户端存储大量结构化数据。它是一个NoSQL类型的数据库，数据以“对象仓库”（Object Store）的形式组织，支持通过主键或索引快速查找记录。
关键特性：
- 异步操作，不会阻塞UI
- 支持事务机制，保证数据一致性
- 可存储对象、数组、File、Blob等复杂类型
- 容量较大（通常为几十MB到无限，取决于浏览器和用户授权）
基本使用步骤
要使用IndexedDB，需经过打开数据库、创建对象仓库、执行增删改查等步骤。以下是核心流程示例：
立即学习“Java免费学习笔记（深入）”；
1. 打开或创建数据库使用window.indexedDB.open()打开数据库，若不存在则自动创建。
const request = indexedDB.open('MyDB', 1);
2. 处理数据库升级（onupgradeneeded）
当数据库版本变化或首次创建时触发，用于定义数据结构。
HTML5点击添加商品购物车代码
下载
这个插件使用了HTML5的新特效：storage ，就是游览器数据库的功能，这跟之前把数据存在cookies里面原理是相识的，这样的好处在于用户刷新页面，数据还在，，又不需要跟后端进行数据交互。
request.onupgradeneeded = function(event) {
const db = event.target.result;
if (!db.objectStoreNames.contains('users')) {
const objectStore = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
objectStore.createIndex('email', 'email', { unique: true });
}
};
3. 操作数据：添加记录
在事务中向对象仓库添加数据。
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['users'], 'readwrite');
const store = transaction.objectStore('users');
store.add({ name: 'Alice', email: 'alice@example.com' });
transaction.oncomplete = () => console.log('数据已保存');
transaction.onerror = () => console.error('事务失败');
};
查询与读取数据
可以通过主键或索引高效获取数据。
按主键读取const transaction = db.transaction(['users'], 'readonly');
const store = transaction.objectStore('users');
const getRequest = store.get(1);
getRequest.onsuccess = function() {
console.log('查到用户:', getRequest.result);
};
使用索引查询
const index = store.index('email');
const emailRequest = index.get('alice@example.com');
emailRequest.onsuccess = function() {
console.log('通过邮箱查到:', emailRequest.result);
};
遍历所有记录
store.openCursor().onsuccess = function(event) {
const cursor = event.target.result;
if (cursor) {
console.log('用户:', cursor.value);
cursor.continue();
}
};
更新与删除数据
更新和删除也需在事务中进行。
更新记录store.put({ id: 1, name: 'Alice Smith', email: 'alice.smith@example.com' });
删除记录
store.delete(1);
操作完成后，记得关闭数据库连接：db.close();
基本上就这些。IndexedDB虽然API略显繁琐，但配合Promise封装或使用如idb这样的轻量库（Google推荐），可以大幅简化代码。掌握它，能让你的Web应用真正具备离线能力与高性能本地存储。
