1. IndexedDB 基础概念与优势
本篇文章围绕 JS 操作 IndexedDB 基础教程：前端离线存储从零到实战指南展开，覆盖从零到实际落地的离线存储方案。在前端开发中，IndexedDB是浏览器提供的一整套本地数据库解决方案，专为离线存储设计。它支持大容量数据、结构化对象和事务逻辑，适合构建离线应用与缓存场景。
与 localStorage、sessionStorage 相比，IndexedDB能够存储复杂对象并提供异步 API，确保 UI 的响应性与性能。本文将带你从概念到实践，逐步掌握前端离线存储的核心能力。
1.1 IndexedDB 的定义与适用场景
IndexedDB是浏览器端的非关系型数据库，专为离线数据管理而设计。它支持大量数据的离线存储、复杂对象结构以及离线查询能力。
在实际应用中，IndexedDB适用于离线笔记、缓存表单、离线待办等场景，尤其是需要异步读写、事务一致性的场景。
1.2 关键概念：数据库、对象存储、索引与事务
数据库是一个命名空间，包含一个或多个 objectStore，用于组织数据。
对象存储（ObjectStore）类似于关系型数据库的表，用于保存键值对数据，通常通过 主键 来定位记录。
2. JS 操作 IndexedDB 的基础流程
本教程的核心目标是把前端离线存储变成可落地的能力。下面我们按步骤讲解打开数据库、创建对象存储、以及基本的增删改查操作。
2.1 打开数据库与版本控制
使用 indexedDB.open 可以打开一个数据库，传入数据库名称和版本号。onupgradeneeded 事件用于初次创建对象存储或升级结构。
版本控制机制确保在数据库结构需要变更时进行迁移，避免数据不一致。下面的代码演示了打开数据库以及在需要时创建对象存储的过程。
function openDB() {return new Promise((resolve, reject) => {const request = indexedDB.open('todoDB', 1);request.onerror = () => reject(request.error);request.onsuccess = () => resolve(request.result);request.onupgradeneeded = (event) => {const db = event.target.result;if (!db.objectStoreNames.contains('todos')) {const store = db.createObjectStore('todos', { keyPath: 'id', autoIncrement: true });store.createIndex('by_due', 'due', { unique: false });}};});
}
通过上述代码，你获得了一个可操作的数据库实例，后续的读写都依赖于这个实例。
2.2 基本 CRUD 操作
在 IndexedDB 中，所有写操作都在 事务 内完成。你需要获取 objectStore，然后调用 add、put、get、delete 等方法。
下面给出常见的增删改查示例，帮助你快速上手。请注意异常处理和事务完成通知以确保数据一致性。
async function addTodo(db, todo) {return new Promise((resolve, reject) => {const tx = db.transaction('todos', 'readwrite');const store = tx.objectStore('todos');const req = store.add(todo);req.onsuccess = () => resolve(req.result);req.onerror = () => reject(req.error);tx.oncomplete = () => console.log('Transaction complete');});
}async function getAllTodos(db) {return new Promise((resolve, reject) => {const tx = db.transaction('todos', 'readonly');const store = tx.objectStore('todos');const req = store.getAll();req.onsuccess = () => resolve(req.result);req.onerror = () => reject(req.error);});
}
事务的原子性与一致性是 IndexedDB 的核心优势之一，确保同一事务中的操作要么全部成功，要么回滚。
3. 实践中的离线存储策略
在实际应用中，离线存储不仅是“把数据放到本地”，还需要设计数据模型与同步策略以实现可用性与一致性。
3.1 数据模型设计与本地化策略
设计数据模型时，优先考虑需要离线存储的字段，使用一个具备自增主键的 对象存储，以简化增删改查。
考虑到用户在离线状态下的使用体验，可以在本地实现一个简单的缓存层，页面加载时优先读取离线数据，随后再尝试进行网络同步。
3.2 离线与线上数据同步与冲突处理
离线工作阶段，同步策略和冲突解决尤为重要。常见做法包括时间戳、版本号或服务器端回滚策略。
实现时应关注 幂等性，确保相同操作在多次同步中不会产生副作用，以及最终数据的一致性。
4. 实战案例：离线待办应用的实现
以下案例聚焦一个简单的离线待办应用，目的是演示从本地存储到网络同步的完整流程。它涵盖数据库访问封装、前端离线缓存、以及网络请求同步等要点。
4.1 需求与架构
需求很简单：在浏览器离线时也能创建、读取、修改和删除待办事项，并在网络恢复后将本地变更同步到服务器。
核心要素包括：IndexedDB 存储表、前端离线缓存、以及 网络请求同步 的逻辑设计。
4.2 代码架构与模块化
通过分层架构将数据库访问、数据模型以及网络同步解耦，提升可维护性与测试性。你可以把数据库访问封装成一个 数据库服务模块，对外暴露简单的 CRUD API。
下面给出一个简化的数据库服务模块核心示例，帮助你快速上手。模块化设计有助于后续的扩展和单元测试。
// dbService.js
export async function initDB() {const db = await openDB();return db;
}
export async function addTodoItem(db, item) {const tx = db.transaction('todos', 'readwrite');const store = tx.objectStore('todos');const req = store.add(item);return new Promise((resolve, reject) => {req.onsuccess = () => resolve(req.result);req.onerror = () => reject(req.error);tx.oncomplete = () => console.log('addTodoItem complete');});
}
export async function getTodos(db) {const tx = db.transaction('todos', 'readonly');const store = tx.objectStore('todos');const req = store.getAll();return new Promise((resolve, reject) => {req.onsuccess = () => resolve(req.result);req.onerror = () => reject(req.error);});
}
4.3 关键代码片段：初始化、增删改查、同步
以下片段展示了初始化数据库、添加待办、读取 todos，以及一个简单的同步示例。要点是确保在网络恢复时能正确将本地变更合并到服务器。
// 使用示例
async function main() {const db = await initDB();await addTodoItem(db, { title: '完成离线存储教程', due: '2025-12-31', completed: false });const list = await getTodos(db);console.log(list);
}
main();
