前端数据库：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.put(customer);
  
  request.onsuccess = () => {
    console.log('Customer updated successfully');
  };
  
  request.onerror = (event) => {
    console.error('Error updating customer:', event.target.error);
  };
}

删除数据

function deleteCustomer(db, id) {
  const transaction = db.transaction(['customers'], 'readwrite');
  const store = transaction.objectStore('customers');
  
  const request = store.delete(id);
  
  request.onsuccess = () => {
    console.log('Customer deleted successfully');
  };
  
  request.onerror = (event) => {
    console.error('Error deleting customer:', event.target.error);
  };
}

三、高级特性

3.1 复杂查询与游标

function queryCustomers(db, queryOptions) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['customers'], 'readonly');
    const store = transaction.objectStore('customers');
    const index = store.index(queryOptions.indexName || 'name');
    
    const range = queryOptions.range 
      ? IDBKeyRange.bound(queryOptions.range.lower, queryOptions.range.upper)
      : null;
    
    const request = index.openCursor(range, queryOptions.direction || 'next');
    const results = [];
    
    request.onsuccess = (event) => {
      const cursor = event.target.result;
      if (cursor) {
        if (queryOptions.filter && !queryOptions.filter(cursor.value)) {
          cursor.continue();
          return;
        }
        
        results.push(cursor.value);
        
        if (queryOptions.limit && results.length >= queryOptions.limit) {
          resolve(results);
          return;
        }
        
        cursor.continue();
      } else {
        resolve(results);
      }
    };
    
    request.onerror = (event) => {
      reject(event.target.error);
    };
  });
}

3.2 事务高级用法

function transferFunds(db, fromAccount, toAccount, amount) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['accounts'], 'readwrite');
    const store = transaction.objectStore('accounts');
    
    // 获取源账户
    const getFromRequest = store.get(fromAccount);
    const getToRequest = store.get(toAccount);
    
    let fromAccountData, toAccountData;
    
    getFromRequest.onsuccess = () => {
      fromAccountData = getFromRequest.result;
      if (fromAccountData.balance < amount) {
        reject(new Error('Insufficient funds'));
        transaction.abort();
        return;
      }
      
      // 检查是否已获取目标账户数据
      if (toAccountData) {
        performTransfer();
      }
    };
    
    getToRequest.onsuccess = () => {
      toAccountData = getToRequest.result;
      // 检查是否已获取源账户数据
      if (fromAccountData) {
        performTransfer();
      }
    };
    
    function performTransfer() {
      // 更新余额
      fromAccountData.balance -= amount;
      toAccountData.balance += amount;
      
      // 保存更新
      const putFromRequest = store.put(fromAccountData);
      const putToRequest = store.put(toAccountData);
      
      putFromRequest.onsuccess = putToRequest.onsuccess = () => {
        resolve();
      };
      
      putFromRequest.onerror = putToRequest.onerror = (event) => {
        reject(event.target.error);
        transaction.abort();
      };
    }
    
    getFromRequest.onerror = getToRequest.onerror = (event) => {
      reject(event.target.error);
      transaction.abort();
    };
  });
}

3.3 性能优化技巧

1. 批量操作优化：

function bulkAddCustomers(db, customers) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const store = transaction.objectStore('customers');
    
    let completed = 0;
    const total = customers.length;
    
    customers.forEach(customer => {
      const request = store.add(customer);
      
      request.onsuccess = () => {
        completed++;
        if (completed === total) {
          resolve();
        }
      };
      
      request.onerror = (event) => {
        reject(event.target.error);
        transaction.abort();
      };
    });
  });
}

2. 索引设计原则：

   • 为频繁查询的字段创建索引
   • 避免过多索引影响写入性能
   • 对复合查询考虑创建复合索引

3. 内存管理：

   • 使用游标分批处理大数据集
   • 及时关闭不再使用的数据库连接
   • 合理设置事务作用域

四、实战案例：构建离线优先的待办事项应用

4.1 数据库设计

// 数据库初始化
const initDB = () => {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('TodoDB', 2);
    
    request.onerror = (event) => {
      reject(event.target.error);
    };
    
    request.onsuccess = (event) => {
      resolve(event.target.result);
    };
    
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      
      // 创建待办事项存储
      const todoStore = db.createObjectStore('todos', {
        keyPath: 'id',
        autoIncrement: true
      });
      
      // 创建索引
      todoStore.createIndex('completed', 'completed', { unique: false });
      todoStore.createIndex('dueDate', 'dueDate', { unique: false });
      todoStore.createIndex('priority', 'priority', { unique: false });
      
      // 创建用户设置存储
      db.createObjectStore('settings', {
        keyPath: 'name'
      });
    };
  });
};

4.2 同步策略实现

class TodoSyncManager {
  constructor(db) {
    this.db = db;
    this.lastSync = null;
    this.syncInProgress = false;
  }
  
  async syncWithServer() {
    if (this.syncInProgress) return;
    this.syncInProgress = true;
    
    try {
      // 获取本地更改
      const localChanges = await this.getUnsyncedChanges();
      
      // 获取服务器更改
      const serverChanges = await this.fetchServerChanges();
      
      // 合并冲突解决
      const mergedData = this.mergeChanges(localChanges, serverChanges);
      
      // 更新本地数据库
      await this.applyChanges(mergedData.local);
      
      // 推送更改到服务器
      await this.pushChanges(mergedData.remote);
      
      // 更新同步时间戳
      this.lastSync = new Date();
      await this.saveSyncTimestamp();
      
    } catch (error) {
      console.error('Sync failed:', error);
    } finally {
      this.syncInProgress = false;
    }
  }
  
  async getUnsyncedChanges() {
    return new Promise((resolve, reject) => {
      const transaction = this.db.transaction(['todos'], 'readonly');
      const store = transaction.objectStore('todos');
      const index = store.index('syncStatus');
      
      const request = index.getAll(IDBKeyRange.only('unsynced'));
      request.onsuccess = () => resolve(request.result);
      request.onerror = (event) => reject(event.target.error);
    });
  }
  
  // 其他方法实现...
}

五、常见问题与解决方案

5.1 浏览器兼容性处理

// 兼容性检查与降级方案
function getDB() {
  if (!window.indexedDB) {
    console.warn('IndexedDB not supported, falling back to localStorage');
    return {
      type: 'localStorage',
      // 实现兼容接口...
    };
  }
  
  return {
    type: 'indexedDB',
    // 原生接口...
  };
}

5.2 错误处理最佳实践

1. 事务失败处理：

function withTransaction(db, storeNames, mode, operation) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(storeNames, mode);
    
    transaction.onerror = (event) => {
      reject(event.target.error);
    };
    
    transaction.oncomplete = () => {
      resolve();
    };
    
    operation(transaction);
  });
}

2. 数据库版本冲突处理：

const request = indexedDB.open('MyDB', 2);
request.onblocked = () => {
  console.warn('Database upgrade blocked by other connection');
  // 提示用户关闭其他标签页
};

5.3 数据迁移策略

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const oldVersion = event.oldVersion;
  
  // 从版本0升级到1
  if (oldVersion < 1) {
    const store = db.createObjectStore('products', {
      keyPath: 'id'
    });
    store.createIndex('category', 'category', { unique: false });
  }
  
  // 从版本1升级到2
  if (oldVersion < 2) {
    const transaction = event.target.transaction;
    const store = transaction.objectStore('products');
    store.createIndex('price', 'price', { unique: false });
    
    // 数据迁移示例
    const cursorRequest = store.openCursor();
    cursorRequest.onsuccess = (e) => {
      const cursor = e.target.result;
      if (cursor) {
        const product = cursor.value;
        // 添加新字段或转换数据
        product.updatedAt = new Date();
        cursor.update(product);
        cursor.continue();
      }
    };
  }
};

六、总结与最佳实践

IndexedDB作为现代Web应用强大的客户端存储解决方案，为开发者提供了构建复杂离线应用的能力。以下是使用IndexedDB的关键最佳实践：

1. 设计阶段：

   • 合理规划对象存储和索引结构
   • 考虑数据增长和未来扩展需求

2. 实现阶段：

   • 使用Promise封装异步操作
   • 实现健壮的错误处理
   • 优化事务作用域和持续时间

3. 维护阶段：

   • 实现数据迁移策略
   • 定期清理过期数据
   • 监控存储使用情况

4. 性能方面：

   • 批量操作减少事务数量
   • 使用游标处理大数据集
   • 避免在事务中执行耗时操作

随着PWA和离线优先应用的普及，IndexedDB的重要性日益凸显。掌握其核心概念和高级用法，将帮助开发者构建更强大、更可靠的Web应用程序。