怎么使用IndexedDB

# 怎么使用IndexedDB

## 一、IndexedDB概述

### 1.1 什么是IndexedDB

IndexedDB是一種在瀏覽器中存儲大量結構化數據的底層API。它是Web Storage API（如localStorage）的更強大替代方案，具有以下關鍵特性：

- **非關系型數據庫**：基于鍵值對存儲，而非傳統的關系型表格
- **異步操作**：所有操作都是異步的，不會阻塞UI線程
- **支持事務**：提供ACID事務保證
- **大容量存儲**：通常允許存儲比localStorage大得多的數據（通常為50MB+）
- **索引支持**：可以創建索引實現高效查詢
- **同源策略**：遵循同源策略，不同網站無法訪問彼此的數據

### 1.2 適用場景

IndexedDB特別適合以下場景：
- 需要離線工作的Web應用
- 需要存儲大量結構化數據的應用
- 需要復雜查詢的應用
- 需要存儲二進制數據（如圖片、文件）的應用

## 二、基本概念

### 2.1 核心組件

1. **數據庫(Database)**：頂層的容器，每個源可以創建多個數據庫
2. **對象存儲(Object Store)**：相當于關系型數據庫中的表
3. **索引(Index)**：提供對對象存儲中數據的快速查找
4. **事務(Transaction)**：所有操作必須在事務中執行
5. **游標(Cursor)**：用于遍歷對象存儲或索引中的記錄
6. **鍵(Key)**：每條記錄的唯一標識符

### 2.2 數據模型

IndexedDB使用鍵值對存儲數據，其中：
- **鍵(Key)**：可以是數字、字符串、日期、數組或二進制數據
- **值(Value)**：可以是任何JavaScript對象，包括復雜對象和二進制數據

## 三、基本操作指南

### 3.1 打開/創建數據庫

```javascript
const request = indexedDB.open('myDatabase', 1);

request.onerror = (event) => {
  console.error('數據庫打開失敗:', event.target.error);
};

request.onsuccess = (event) => {
  const db = event.target.result;
  console.log('數據庫打開成功');
  // 在這里執行數據庫操作
};

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  // 在這里創建或修改對象存儲
  if (!db.objectStoreNames.contains('customers')) {
    const store = db.createObjectStore('customers', { keyPath: 'id' });
    // 創建索引
    store.createIndex('name', 'name', { unique: false });
    store.createIndex('email', 'email', { unique: true });
  }
};

3.2 添加數據

function addCustomer(db, customer) {
  const transaction = db.transaction(['customers'], 'readwrite');
  const store = transaction.objectStore('customers');
  
  const request = store.add(customer);
  
  request.onsuccess = () => {
    console.log('客戶添加成功');
  };
  
  request.onerror = (event) => {
    console.error('添加客戶失敗:', event.target.error);
  };
}

3.3 讀取數據

3.3.1 通過主鍵讀取

function getCustomer(db, id) {
  const transaction = db.transaction(['customers'], 'readonly');
  const store = transaction.objectStore('customers');
  
  const request = store.get(id);
  
  request.onsuccess = () => {
    if (request.result) {
      console.log('找到客戶:', request.result);
    } else {
      console.log('未找到該客戶');
    }
  };
  
  request.onerror = (event) => {
    console.error('查詢失敗:', event.target.error);
  };
}

3.3.2 通過索引查詢

function getCustomerByName(db, name) {
  const transaction = db.transaction(['customers'], 'readonly');
  const store = transaction.objectStore('customers');
  const index = store.index('name');
  
  const request = index.get(name);
  
  request.onsuccess = () => {
    if (request.result) {
      console.log('找到客戶:', request.result);
    } else {
      console.log('未找到該客戶');
    }
  };
}

3.4 更新數據

function updateCustomer(db, customer) {
  const transaction = db.transaction(['customers'], 'readwrite');
  const store = transaction.objectStore('customers');
  
  const request = store.put(customer);
  
  request.onsuccess = () => {
    console.log('客戶信息更新成功');
  };
  
  request.onerror = (event) => {
    console.error('更新失敗:', event.target.error);
  };
}

3.5 刪除數據

function deleteCustomer(db, id) {
  const transaction = db.transaction(['customers'], 'readwrite');
  const store = transaction.objectStore('customers');
  
  const request = store.delete(id);
  
  request.onsuccess = () => {
    console.log('客戶刪除成功');
  };
  
  request.onerror = (event) => {
    console.error('刪除失敗:', event.target.error);
  };
}

四、高級操作

4.1 使用游標遍歷數據

function getAllCustomers(db) {
  const transaction = db.transaction(['customers'], 'readonly');
  const store = transaction.objectStore('customers');
  
  const customers = [];
  
  store.openCursor().onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      customers.push(cursor.value);
      cursor.continue();
    } else {
      console.log('所有客戶:', customers);
    }
  };
}

4.2 范圍查詢

function getCustomersByAgeRange(db, min, max) {
  const transaction = db.transaction(['customers'], 'readonly');
  const store = transaction.objectStore('customers');
  const index = store.index('age');
  
  const range = IDBKeyRange.bound(min, max);
  const customers = [];
  
  index.openCursor(range).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      customers.push(cursor.value);
      cursor.continue();
    } else {
      console.log('年齡范圍內的客戶:', customers);
    }
  };
}

4.3 批量操作

function batchAddCustomers(db, customers) {
  const transaction = db.transaction(['customers'], 'readwrite');
  const store = transaction.objectStore('customers');
  
  customers.forEach(customer => {
    store.add(customer);
  });
  
  transaction.oncomplete = () => {
    console.log('批量添加完成');
  };
  
  transaction.onerror = (event) => {
    console.error('批量添加失敗:', event.target.error);
  };
}

五、最佳實踐

5.1 錯誤處理

1. 始終檢查錯誤：所有操作都應設置onerror處理程序
2. 事務錯誤處理：事務本身也可以有錯誤處理
3. 優雅降級：為不支持IndexedDB的瀏覽器提供備用方案

function handleDBError(error) {
  console.error('數據庫錯誤:', error);
  // 可以在這里實現錯誤恢復或用戶通知
}

// 在所有請求中添加錯誤處理
request.onerror = (event) => handleDBError(event.target.error);

5.2 性能優化

1. 批量操作：使用單個事務處理多個操作
2. 合理使用索引：只為常用查詢字段創建索引
3. 限制數據量：只存儲必要的數據
4. 定期清理：刪除不再需要的數據

5.3 版本管理

1. 版本升級策略：設計良好的版本升級路徑
2. 數據遷移：在onupgradeneeded中處理數據遷移
3. 兼容性檢查：檢查當前版本是否需要升級

const DB_VERSION = 2;
const request = indexedDB.open('myDatabase', DB_VERSION);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const oldVersion = event.oldVersion;
  
  if (oldVersion < 1) {
    // 初始版本創建
    db.createObjectStore('customers', { keyPath: 'id' });
  }
  
  if (oldVersion < 2) {
    // 版本2升級
    const transaction = event.target.transaction;
    const store = transaction.objectStore('customers');
    store.createIndex('registrationDate', 'registrationDate');
  }
};

六、常見問題與解決方案

6.1 瀏覽器兼容性

1. 檢查支持情況：

if (!window.indexedDB) {
  console.log('您的瀏覽器不支持IndexedDB');
  // 提供備用方案
}

1. 前綴問題：某些瀏覽器使用帶前綴的實現（如webkitIndexedDB）

6.2 事務沖突

1. 合理設計事務范圍：避免長時間運行的事務
2. 重試機制：對于失敗的事務實現重試邏輯

6.3 存儲限制

1. 檢查剩余配額：

navigator.storage.estimate().then(estimate => {
  console.log(`已使用: ${estimate.usage} bytes`);
  console.log(`剩余: ${estimate.quota - estimate.usage} bytes`);
});

1. 請求更多存儲空間：

navigator.storage.persist().then(granted => {
  if (granted) {
    console.log('存儲將不會被自動清理');
  }
});

七、實際應用示例

7.1 離線筆記應用

class NotesDB {
  constructor() {
    this.db = null;
    this.init();
  }
  
  init() {
    const request = indexedDB.open('NotesDB', 1);
    
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      if (!db.objectStoreNames.contains('notes')) {
        const store = db.createObjectStore('notes', {
          keyPath: 'id',
          autoIncrement: true
        });
        store.createIndex('title', 'title', { unique: false });
        store.createIndex('createdAt', 'createdAt', { unique: false });
      }
    };
    
    request.onsuccess = (event) => {
      this.db = event.target.result;
      console.log('數據庫初始化完成');
    };
    
    request.onerror = (event) => {
      console.error('數據庫初始化失敗:', event.target.error);
    };
  }
  
  // 其他方法：addNote, getNote, getAllNotes, updateNote, deleteNote等
}

7.2 文件緩存系統

function cacheFile(db, file) {
  return new Promise((resolve, reject) => {
    const transaction = db.transaction(['files'], 'readwrite');
    const store = transaction.objectStore('files');
    
    const reader = new FileReader();
    reader.onload = (event) => {
      const request = store.put({
        id: file.name,
        name: file.name,
        type: file.type,
        size: file.size,
        lastModified: file.lastModified,
        data: event.target.result
      });
      
      request.onsuccess = () => resolve();
      request.onerror = (event) => reject(event.target.error);
    };
    
    reader.readAsArrayBuffer(file);
  });
}

八、總結

IndexedDB為Web應用提供了強大的客戶端存儲能力，適合需要存儲大量結構化數據的場景。掌握IndexedDB需要理解其核心概念和異步編程模型。通過合理設計數據庫結構、正確使用事務和索引，可以構建出性能優異的離線應用。

關鍵要點回顧：

1. IndexedDB是異步的、基于事務的鍵值存儲系統
2. 所有操作必須在事務中執行
3. 合理使用索引可以提高查詢性能
4. 良好的錯誤處理是必不可少的
5. 版本管理需要考慮數據遷移

隨著PWA(Progressive Web Apps)的普及，IndexedDB的重要性日益增加，成為現代Web開發中不可或缺的技術之一。 “`