IndexedDB原理解析 - 元素码农

发布时间: 2025-03-23 16:02

↑

# IndexedDB原理解析

## 概述

IndexedDB是一个低级API,用于客户端存储大量结构化数据。它是一个事务型的数据库系统,基于JavaScript面向对象数据库。本文将详细介绍IndexedDB的实现原理和使用方法。

## 基本概念

### 1. 数据库模型

#### 对象存储
```javascript
// 创建对象存储空间
class IndexedDBStore {
  constructor(dbName, version) {
    this.dbName = dbName;
    this.version = version;
    this.db = null;
  }

async open() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, this.version);
      
      request.onerror = () => {
        reject(request.error);
      };
      
      request.onsuccess = () => {
        this.db = request.result;
        resolve(this.db);
      };
      
      request.onupgradeneeded = (event) => {
        const db = event.target.result;
        
        // 创建对象存储空间
        if (!db.objectStoreNames.contains('users')) {
          const store = db.createObjectStore('users', {
            keyPath: 'id',
            autoIncrement: true
          });
          
          // 创建索引
          store.createIndex('name', 'name', { unique: false });
          store.createIndex('email', 'email', { unique: true });
        }
      };
    });
  }
}
```

#### 索引结构
```javascript
// 索引管理
class IndexManager {
  constructor(store) {
    this.store = store;
  }

createIndex(indexName, keyPath, options = {}) {
    if (!this.store.indexNames.contains(indexName)) {
      this.store.createIndex(indexName, keyPath, options);
    }
  }

async queryByIndex(indexName, value) {
    return new Promise((resolve, reject) => {
      const index = this.store.index(indexName);
      const request = index.getAll(value);
      
      request.onsuccess = () => {
        resolve(request.result);
      };
      
      request.onerror = () => {
        reject(request.error);
      };
    });
  }
}
```

### 2. 事务处理

#### 事务类型
```javascript
// 事务管理器
class TransactionManager {
  constructor(db) {
    this.db = db;
  }

// 只读事务
  async read(storeName, callback) {
    const transaction = this.db.transaction(storeName, 'readonly');
    const store = transaction.objectStore(storeName);
    
    try {
      await callback(store);
      await this.complete(transaction);
    } catch (error) {
      transaction.abort();
      throw error;
    }
  }

// 读写事务
  async readWrite(storeName, callback) {
    const transaction = this.db.transaction(storeName, 'readwrite');
    const store = transaction.objectStore(storeName);
    
    try {
      await callback(store);
      await this.complete(transaction);
    } catch (error) {
      transaction.abort();
      throw error;
    }
  }

// 等待事务完成
  complete(transaction) {
    return new Promise((resolve, reject) => {
      transaction.oncomplete = () => resolve();
      transaction.onerror = () => reject(transaction.error);
      transaction.onabort = () => reject(transaction.error);
    });
  }
}
```

#### 并发控制
```javascript
// 并发控制
class ConcurrencyControl {
  constructor() {
    this.locks = new Map();
  }

async acquireLock(key, mode = 'shared') {
    while (this.isLocked(key, mode)) {
      await this.wait(100);
    }
    
    this.locks.set(key, {
      mode,
      timestamp: Date.now()
    });
  }

releaseLock(key) {
    this.locks.delete(key);
  }

isLocked(key, mode) {
    const lock = this.locks.get(key);
    if (!lock) return false;
    
    if (mode === 'exclusive') {
      return true;
    }
    
    return lock.mode === 'exclusive';
  }

wait(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}
```

## 实现机制

### 1. 数据操作

#### CRUD操作
```javascript
// 数据操作接口
class DataOperations {
  constructor(store) {
    this.store = store;
  }

async create(data) {
    return new Promise((resolve, reject) => {
      const request = this.store.add(data);
      
      request.onsuccess = () => {
        resolve(request.result);
      };
      
      request.onerror = () => {
        reject(request.error);
      };
    });
  }

async read(key) {
    return new Promise((resolve, reject) => {
      const request = this.store.get(key);
      
      request.onsuccess = () => {
        resolve(request.result);
      };
      
      request.onerror = () => {
        reject(request.error);
      };
    });
  }

async update(key, data) {
    return new Promise((resolve, reject) => {
      const request = this.store.put(data);
      
      request.onsuccess = () => {
        resolve(request.result);
      };
      
      request.onerror = () => {
        reject(request.error);
      };
    });
  }

async delete(key) {
    return new Promise((resolve, reject) => {
      const request = this.store.delete(key);
      
      request.onsuccess = () => {
        resolve();
      };
      
      request.onerror = () => {
        reject(request.error);
      };
    });
  }
}
```

#### 查询优化
```javascript
// 查询优化器
class QueryOptimizer {
  constructor(store) {
    this.store = store;
  }

// 范围查询
  async range(indexName, lower, upper, options = {}) {
    const index = this.store.index(indexName);
    const range = IDBKeyRange.bound(lower, upper, 
      options.lowerExclusive, 
      options.upperExclusive
    );
    
    return new Promise((resolve, reject) => {
      const request = index.getAll(range);
      
      request.onsuccess = () => {
        resolve(request.result);
      };
      
      request.onerror = () => {
        reject(request.error);
      };
    });
  }

// 游标遍历
  async cursor(callback, options = {}) {
    return new Promise((resolve, reject) => {
      const request = this.store.openCursor();
      let count = 0;
      
      request.onsuccess = () => {
        const cursor = request.result;
        if (cursor && (!options.limit || count < options.limit)) {
          callback(cursor.value);
          count++;
          cursor.continue();
        } else {
          resolve();
        }
      };
      
      request.onerror = () => {
        reject(request.error);
      };
    });
  }
}
```

### 2. 版本管理

#### 架构升级
```javascript
// 版本管理器
class VersionManager {
  constructor(dbName) {
    this.dbName = dbName;
    this.migrations = new Map();
  }

addMigration(version, callback) {
    this.migrations.set(version, callback);
  }

async upgrade(oldVersion, newVersion, db) {
    for (let version = oldVersion + 1; version <= newVersion; version++) {
      const migration = this.migrations.get(version);
      if (migration) {
        await migration(db);
      }
    }
  }

// 示例迁移
  static sampleMigrations() {
    const manager = new VersionManager('myDB');
    
    // 版本1：创建用户表
    manager.addMigration(1, (db) => {
      const store = db.createObjectStore('users', {
        keyPath: 'id',
        autoIncrement: true
      });
      store.createIndex('email', 'email', { unique: true });
    });
    
    // 版本2：添加用户名索引
    manager.addMigration(2, (db) => {
      const store = db.transaction('users', 'readwrite')
        .objectStore('users');
      store.createIndex('username', 'username', { unique: false });
    });
    
    return manager;
  }
}
```

#### 数据迁移
```javascript
// 数据迁移工具
class DataMigration {
  constructor(oldDb, newDb) {
    this.oldDb = oldDb;
    this.newDb = newDb;
  }

async migrateStore(storeName, transform = null) {
    const oldStore = this.oldDb.transaction(storeName).objectStore(storeName);
    const newStore = this.newDb.transaction(storeName, 'readwrite')
      .objectStore(storeName);
    
    return new Promise((resolve, reject) => {
      oldStore.openCursor().onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
          let data = cursor.value;
          if (transform) {
            data = transform(data);
          }
          
          newStore.put(data);
          cursor.continue();
        } else {
          resolve();
        }
      };
    });
  }

// 数据转换示例
  static transformExample(oldData) {
    return {
      ...oldData,
      lastModified: Date.now(),
      version: 2
    };
  }
}
```