前端数据库：IndexedDB从基础到高级使用指南

前端数据库：IndexedDB从基础到高级使用指南

🌐 我的个人网站：乐乐主题创作室

引言

在现代Web应用开发中，客户端数据存储已成为构建离线优先应用、提升用户体验的关键技术。IndexedDB作为浏览器内置的NoSQL数据库，提供了强大的数据存储和检索能力。本文将全面介绍IndexedDB从基础概念到高级用法的完整知识体系，帮助开发者掌握这一重要技术。

一、IndexedDB概述

1.1 什么是IndexedDB

IndexedDB是一种在用户浏览器中存储大量结构化数据的底层API，它具有以下核心特性：

• NoSQL数据库：基于键值对存储，支持复杂对象存储
• 事务性：所有操作都在事务中执行，保证数据一致性
• 异步API：所有操作都是非阻塞的，通过事件和回调处理结果
• 支持索引：可以创建索引实现高效查询
• 大容量存储：现代浏览器通常支持至少250MB以上存储

1.2 与其他存储方案的比较

存储方案	容量限制	数据类型	同步/异步	查询能力
Cookies	~4KB	字符串	同步	无
localStorage	~5MB	键值对(字符串)	同步	仅按键查询
WebSQL	~50MB	关系型	异步	SQL查询
IndexedDB	250MB+	结构化对象	异步	高级索引查询

二、基础使用

2.1 打开/创建数据库

// 打开或创建数据库
const request = indexedDB.open('MyDatabase', 1);request.onerror = (event) => {console.error('Database error:', event.target.error);
};request.onsuccess = (event) => {const db = event.target.result;console.log('Database opened successfully');// 在这里执行数据库操作
};request.onupgradeneeded = (event) => {const db = event.target.result;// 创建对象存储空间（类似于表）const store = db.createObjectStore('customers', {keyPath: 'id', // 主键autoIncrement: true // 自动生成主键});// 创建索引store.createIndex('name', 'name', { unique: false });store.createIndex('email', 'email', { unique: true });
};

2.2 基本CRUD操作

添加数据

function addCustomer(db, customer) {const transaction = db.transaction(['customers'], 'readwrite');const store = transaction.objectStore('customers');const request = store.add(customer);request.onsuccess = () => {console.log('Customer added successfully');};request.onerror = (event) => {console.error('Error adding customer:', event.target.error);};
}

读取数据

function getCustomer(db, id) {return new Promise((resolve, reject) => {const transaction = db.transaction(['customers'], 'readonly');const store = transaction.objectStore('customers');const request = store.get(id);request.onsuccess = () => {resolve(request.result);};request.onerror = (event) => {reject(event.target.error);};});
}

更新数据

function updateCustomer(db, customer) {const transaction = db.transaction(['customers'], 'readwrite');const store = transaction.objectStore('customers');const request = store