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中文网其他相关文章！