数据库存储-IndexedDB-数据库的创建与打开-前端-HTML5-书闪BookChips

222 - 数据库存储 - IndexedDB - 数据库的创建与打开

作者：

贺及楼

成为作者

更新日期：2025-02-27 18:16:24

前端 - HTML5 《数据库存储 - IndexedDB - 数据库的创建与打开》

在前端开发中，数据存储是一个常见的需求。HTML5 提供了多种数据存储方案，如 localStorage、sessionStorage 等，但这些方案都有一定的局限性，例如只能存储字符串类型的数据，且存储容量有限。而 IndexedDB 则是一种更强大的客户端数据库解决方案，它可以存储大量的结构化数据，并且支持事务操作和索引查询。本文将详细介绍 IndexedDB 数据库的创建与打开。

什么是 IndexedDB

IndexedDB 是一种基于事务的数据库系统，它允许在浏览器中存储和检索数据。与传统的关系型数据库类似，IndexedDB 也支持表、记录和索引的概念，但它是为浏览器环境设计的，因此更加适合前端开发。

IndexedDB 的主要特点包括：

支持多种数据类型：可以存储字符串、数字、日期、对象等多种数据类型。
事务处理：支持事务操作，确保数据的一致性和完整性。
索引查询：可以为数据建立索引，提高查询效率。
异步操作：所有操作都是异步的，不会阻塞主线程。

数据库的创建与打开

基本步骤

创建和打开 IndexedDB 数据库的基本步骤如下：

请求打开数据库：使用 window.indexedDB.open() 方法请求打开一个数据库。
处理版本变更事件：如果数据库不存在或版本号发生变化，会触发 upgradeneeded 事件，在该事件中可以创建或升级数据库。
处理成功事件：当数据库成功打开时，会触发 success 事件，可以在该事件中进行数据操作。
处理错误事件：如果打开数据库过程中发生错误，会触发 error 事件，需要在该事件中处理错误信息。

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IndexedDB 创建与打开示例</title>
</head>
<body>
    <script>
        // 定义数据库名称和版本号
        const dbName = 'myDatabase';
        const dbVersion = 1;
        // 请求打开数据库
        const request = window.indexedDB.open(dbName, dbVersion);
        // 处理版本变更事件
        request.onupgradeneeded = function (event) {
            const db = event.target.result;
            // 创建一个对象存储空间（类似于表）
            const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id', autoIncrement: true });
            // 创建一个索引
            objectStore.createIndex('nameIndex', 'name', { unique: false });
            console.log('数据库升级完成');
        };
        // 处理成功事件
        request.onsuccess = function (event) {
            const db = event.target.result;
            console.log('数据库打开成功');
            // 在这里可以进行数据操作
            // 关闭数据库
            db.close();
        };
        // 处理错误事件
        request.onerror = function (event) {
            console.error('打开数据库时发生错误:', event.target.error);
        };
    </script>
</body>
</html>

代码解释

请求打开数据库：
```
const request = window.indexedDB.open(dbName, dbVersion);
```
window.indexedDB.open() 方法用于请求打开一个数据库，它接受两个参数：数据库名称和版本号。该方法返回一个 IDBOpenDBRequest 对象，用于处理数据库打开的请求。

处理版本变更事件：

request.onupgradeneeded = function (event) {
    const db = event.target.result;
    const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id', autoIncrement: true });
    objectStore.createIndex('nameIndex', 'name', { unique: false });
    console.log('数据库升级完成');
};

当数据库不存在或版本号发生变化时，会触发 upgradeneeded 事件。在该事件中，可以使用 db.createObjectStore() 方法创建一个对象存储空间（类似于表），并使用 objectStore.createIndex() 方法为对象存储空间创建一个索引。

处理成功事件：
```
request.onsuccess = function (event) {
    const db = event.target.result;
    console.log('数据库打开成功');
    db.close();
};
```
当数据库成功打开时，会触发 success 事件。在该事件中，可以获取到打开的数据库对象，并进行数据操作。最后，使用 db.close() 方法关闭数据库。
处理错误事件：
```
request.onerror = function (event) {
    console.error('打开数据库时发生错误:', event.target.error);
};
```
如果打开数据库过程中发生错误，会触发 error 事件。在该事件中，可以获取到错误信息并进行处理。

总结

步骤	方法/事件	描述
请求打开数据库	`window.indexedDB.open(dbName, dbVersion)`	请求打开一个数据库，返回 `IDBOpenDBRequest` 对象
处理版本变更事件	`request.onupgradeneeded`	当数据库不存在或版本号发生变化时触发，可用于创建或升级数据库
处理成功事件	`request.onsuccess`	当数据库成功打开时触发，可进行数据操作
处理错误事件	`request.onerror`	当打开数据库过程中发生错误时触发，可处理错误信息

通过以上步骤，我们可以轻松地创建和打开一个 IndexedDB 数据库。在实际开发中，可以根据具体需求在 upgradeneeded 事件中创建更多的对象存储空间和索引，以及在 success 事件中进行数据的增删改查操作。