IndexedDB 是浏览器中用于存储大量结构化数据的本地存储方案，支持异步操作、事务机制和索引查询。其核心概念包括数据库、对象仓库、索引、事务和游标。通过 open() 方法创建或打开数据库，并在 onupgradeneeded 事件中定义结构，如创建对象仓库和索引。数据操作需在事务中进行，支持 add、get、put、delete 等方法。可利用 IDBKeyRange 实现范围查询，结合游标遍历数据。为提升开发体验，建议封装 Promise 化 API，优化批量操作性能，合理处理错误与降级，并监控存储配额。掌握这些机制可显著增强 Web 应用的离线能力与数据处理性能。
IndexedDB 是现代浏览器提供的一种强大本地存储方案，适合存储大量结构化数据，包括文件和二进制对象（Blob）。相比 localStorage 和 sessionStorage，它支持异步操作、事务机制、索引查询和复杂数据类型，适用于需要离线工作或高性能数据处理的 Web 应用。
IndexedDB 核心概念解析
使用 IndexedDB 前需理解其关键组成部分：
- 数据库（Database）：每个应用可拥有一个或多个数据库，通过名称和版本号标识。
- 对象仓库（Object Store）：类似于表，用于存放记录。每条记录包含键和值，值通常是 JSON 对象。
- 索引（Index）：基于对象属性建立的查询加速机制，支持高效查找。
- 事务（Transaction）：所有读写操作必须在事务中进行，保证数据一致性。
- 游标（Cursor）：用于遍历大量数据或按特定条件逐条访问记录。
创建数据库与对象仓库
初始化 IndexedDB 需打开连接并在 onupgradeneeded 事件中定义结构：
const request = indexedDB.open('MyAppDB', 1);
request.onupgradeneeded = function(event) {
const db = event.target.result;
// 创建用户对象仓库，主键为 id
if (!db.objectStoreNames.contains('users')) {
const store = db.createObjectStore('users', { keyPath: 'id' });
store.createIndex('email', 'email', { unique: true });
store.createIndex('age', 'age', { unique: false });
}
};
request.onsuccess = function(event) {
const db = event.target.result;
console.log('数据库打开成功');
};
版本变更触发 onupgradeneeded，是修改结构的唯一时机。
php中级教程之ajax技术
下载
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速
立即学习“Java免费学习笔记（深入）”；
增删改查操作实战
通过事务执行具体操作：
-
添加数据：
const transaction = db.transaction(['users'], 'readwrite'); const store = transaction.objectStore('users'); store.add({ id: 1, name: 'Alice', email: 'alice@example.com', age: 28 }); -
根据索引查询：
const index = store.index('email'); const getRequest = index.get('alice@example.com'); getRequest.onsuccess = () => { if (getRequest.result) { console.log('找到用户:', getRequest.result); } }; -
范围查询与游标遍历：
const range = IDBKeyRange.lowerBound(18); // 年龄 >= 18 const cursorRequest = store.index('age').openCursor(range); cursorRequest.onsuccess = function(event) { const cursor = event.target.result; if (cursor) { console.log('符合条件的用户:', cursor.value); cursor.continue(); } }; - 更新与删除： 使用 put() 更新记录，delete() 删除指定键的条目。
高级技巧与最佳实践
提升 IndexedDB 实际应用能力的关键点：
- 封装 Promise 化 API：原生 IndexedDB 使用事件回调，可用 Promise 封装简化逻辑，便于结合 async/await。
- 批量操作优化性能：将多个操作放入同一事务，减少开销；避免长时间持有事务。
- 错误处理与降级策略：监听 error 和 abort 事件，必要时提示用户或回退到其他存储方式。
- 监控存储配额：部分浏览器限制存储空间，可通过 navigator.storage.estimate() 获取使用情况。
- 支持复合键与自动递增键：灵活设置 keyPath 或使用自增主键适应不同场景。
