前端数据库：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