IndexedDB 初學者指南

在 Web 應用程式中使用用戶端儲存的教學課程

建立現代 Web 應用程序，尤其是漸進式 Web 應用程式 (PWA) 時，擁有一種離線儲存資料的方法至關重要。 IndexedDB 是一個功能強大的客戶端資料庫，允許 Web 應用程式儲存和檢索數據，即使使用者處於離線狀態也是如此。本指南將引導您了解 IndexedDB 的基礎知識，向您展示如何在 Web 應用程式中建立、讀取、更新和刪除資料（CRUD 操作）。

什麼是 IndexedDB？

IndexedDB 是一個低階 API，用於客戶端儲存大量結構化資料（包括檔案和 blob）。與 localStorage 不同，IndexedDB 可讓您儲存複雜的資料類型，而不僅僅是字串。它使用非同步事務性資料庫模型，這使得它對需要處理大型資料集或離線資料同步的應用程式來說非常強大。

為什麼要使用 IndexedDB？

• 離線功能：非常適合漸進式網路應用程式 (PWA) 和離線優先應用程式。
• 儲存容量：與localStorage（限制在5-10MB左右）相比，IndexedDB可以儲存更多的資料。
• 靈活性：儲存複雜的對象，如陣列、對象，甚至 blob。
• 非同步：操作不會阻塞 UI 線程，這表示您的應用程式保持回應。

入門：設定 IndexedDB

讓我們深入了解使用 IndexedDB 的核心步驟。我們將涵蓋：

• 建立或開啟資料庫
• 建立物件儲存（表）
• 新增資料
• 讀取資料
• 更新資料
• 刪除資料

第 1 步：開啟資料庫

要與 IndexedDB 交互，首先需要開啟與資料庫的連線。如果資料庫不存在，則會建立它。

const request = indexedDB.open('MyCustomersDatabase', 1);

request.onerror = (event) => {
    console.error('Database error:', event.target.errorCode);
};

request.onsuccess = (event) => {
    const db = event.target.result;
    console.log('Database opened successfully', db);
};

request.onupgradeneeded = (event) => {
    const db = event.target.result;
    if (!db.objectStoreNames.contains('customers')) {
        const objectStore = db.createObjectStore('customers', { keyPath: 'id' });
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { unique: true });
        console.log('Object store created.');
    }
};

這是發生的事情：

• indexedDB.open 開啟或建立資料庫。
• onerror 處理開啟資料庫時的任何錯誤。
• onsuccess 在資料庫連線成功開啟時觸發。
• 當資料庫需要升級時（例如，如果這是第一次開啟資料庫或版本變更），則會觸發 onupgradeneeded。您可以在其中定義物件儲存（將它們視為 SQL 中的表）。

步驟2：向IndexedDB新增數據

現在我們已經設定了資料庫和物件存儲，讓我們在其中添加一些資料。

const addCustomer = (db, customer) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.add(customer);

    request.onsuccess = () => {
        console.log('Customer added:', customer);
    };

    request.onerror = (event) => {
        console.error('Error adding customer:', event.target.errorCode);
    };
}

const customer = { id: 1, name: 'John Doe', email: 'john@example.com' };

request.onsuccess = (event) => {
    const db = event.target.result;
    addCustomer(db, customer);
};

這是發生的事情：

• 我們建立一個具有「讀寫」存取權限的事務以允許修改。
• add() 方法用於將資料插入物件儲存中。
• 我們監聽成功和錯誤事件以確認資料是否新增成功。

步驟3：從IndexedDB讀取數據

從 IndexedDB 讀取資料也很簡單。讓我們使用 get() 方法來檢索剛剛新增的客戶。

const getCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readonly');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.get(id);

    request.onsuccess = (event) => {
        const customer = event.target.result;
        if (customer) {
            console.log('Customer found:', customer);
        } else {
            console.log('Customer not found.');
        }
    };

    request.onerror = (event) => {
        console.error('Error fetching customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    getCustomer(db, 1); // Fetch customer with ID 1
};

步驟 4：更新 IndexedDB 中的數據

要更新現有記錄，我們可以使用 put() 方法，該方法的工作方式與 add() 類似，但如果鍵已存在，則會取代記錄。

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

    request.onsuccess = () => {
        console.log('Customer updated:', customer);
    };

    request.onerror = (event) => {
        console.error('Error updating customer:', event.target.errorCode);
    };
}

const updatedCustomer = { id: 1, name: 'Jane Doe', email: 'jane@example.com' };

request.onsuccess = (event) => {
    const db = event.target.result;
    updateCustomer(db, updatedCustomer);
};

步驟5：從IndexedDB中刪除數據

最後，要刪除一筆記錄，請使用delete()方法。

const deleteCustomer = (db, id) => {
    const transaction = db.transaction(['customers'], 'readwrite');
    const objectStore = transaction.objectStore('customers');
    const request = objectStore.delete(id);

    request.onsuccess = () => {
        console.log('Customer deleted.');
    };

    request.onerror = (event) => {
        console.error('Error deleting customer:', event.target.errorCode);
    };
}

request.onsuccess = (event) => {
    const db = event.target.result;
    deleteCustomer(db, 1); // Delete customer with ID 1
};

結論

IndexedDB 是一個強大的解決方案，用於處理客戶端資料存儲，尤其是在離線優先的 Web 應用程式中。透過遵循本指南，您已經學會如何：

• 開啟並建立資料庫
• 建立物件儲存
• 新增、讀取、更新和刪除資料

使用 IndexedDB，您可以建立更具彈性的 Web 應用程序，在本地儲存數據，即使沒有互聯網連接也可以工作。

參考：

1. MDN Web 文件 - IndexedDB API
   
   關於 IndexedDB 的工作原理、API 方法和用例的綜合指南。
   
   MDN IndexedDB 指南

2. Google 開發者 - IndexedDB
   
   一篇詳細的文章，介紹了 IndexedDB 建立離線網路應用程式的最佳實踐和使用。
   
   Google 開發者 - IndexedDB

3. W3C 索引資料庫 API
   
   W3C 的官方規格概述了 IndexedDB 的技術實現和結構。
   
   W3C IndexedDB 規範

如果您希望在本教程之外探索有關 IndexedDB 的更多信息，這些資源將提供額外的深度和背景！

編碼愉快！

以上是IndexedDB 初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！