HTML5 Web IndexedDB 数据库详解

IndexedDB 是一种浏览器存储解决方案，允许在用户的浏览器中存储大量结构化数据。它可以存储键值对，并支持索引和事务，适用于需要在客户端进行大量数据操作的应用，比如离线应用。

1. IndexedDB 的基本概念

• 数据库：IndexedDB 数据库是一个包含对象仓库的集合。
• 对象仓库：类似于关系数据库中的表，存储数据的集合。
• 键：每个对象都有一个唯一的键（主键），用于标识数据。
• 事务：操作的一组原子性操作，可以确保数据的一致性与完整性。

2. 创建和打开数据库

在使用 IndexedDB 之前，首先需要创建或打开一个数据库。

// 创建或打开数据库
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {
   
    const db = event.target.result;
    // 创建一个对象仓库
    const objectStore = db.createObjectStore('myObjectStore', {
    keyPath: 'id' });
};

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

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

3. 增加数据

可以通过事务向对象仓库中添加数据。

function addData(db, data) {
   
    const transaction = db.transaction(['myObjectStore'], 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.add(data);

    request.onsuccess = function(event) {
   
        console.log('Data added:', event.target.result);
    };

    request.onerror = function(event) {
   
        console.error('Add error:', event.target.error);
    };
}

// 使用示例
request.onsuccess = function(event) {
   
    const db = event.target.result;
    addData(db, {
    id: 1, name: 'John Doe' });
};

4. 读取数据

可以通过事务读取对象仓库中的数据。

function readData(db, id) {
   
    const transaction = db.transaction(['myObjectStore']);
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.get(id);

    request.onsuccess = function(event) {
   
        console.log('Data read:', event.target.result);
    };

    request.onerror = function(event) {
   
        console.error('Read error:', event.target.error);
    };
}

// 使用示例
request.onsuccess = function(event) {
   
    const db = event.target.result;
    readData(db, 1);
};

5. 更新数据

可以通过事务更新对象仓库中的数据。

function updateData(db, data) {
   
    const transaction = db.transaction(['myObjectStore'], 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.put(data); // put用于添加或更新

    request.onsuccess = function(event) {
   
        console.log('Data updated:', event.target.result);
    };

    request.onerror = function(event) {
   
        console.error('Update error:', event.target.error);
    };
}

// 使用示例
request.onsuccess = function(event) {
   
    const db = event.target.result;
    updateData(db, {
    id: 1, name: 'Jane Doe' });
};

6. 删除数据

可以通过事务删除对象仓库中的数据。

function deleteData(db, id) {
   
    const transaction = db.transaction(['myObjectStore'], 'readwrite');
    const objectStore = transaction.objectStore('myObjectStore');
    const request = objectStore.delete(id);

    request.onsuccess = function(event) {
   
        console.log('Data deleted:', event.target.result);
    };

    request.onerror = function(event) {
   
        console.error('Delete error:', event.target.error);
    };
}

// 使用示例
request.onsuccess = function(event) {
   
    const db = event.target.result;
    deleteData(db, 1);
};

7. 事务处理和错误处理

在进行数据库操作时，务必处理错误和进行适当的事务管理。在上述示例中，每个操作都进行了错误处理，以确保操作的安全性。

8. 总结

IndexedDB 提供了一种强大的方式来存储和管理客户端数据，尤其适合需要离线支持和大数据存储的应用。在使用时，需要仔细处理版本变化和事务管理，以确保数据的完整性和一致性。