JavaScript 中如何使用 IndexedDB？

推荐答案

// www.javascriptcn.com code example
// 打开或创建数据库
const request = indexedDB.open("MyDatabase", 1);

request.onupgradeneeded = function(event) {
    const db = event.target.result;
    // 创建一个对象存储空间
    if (!db.objectStoreNames.contains("myStore")) {
        db.createObjectStore("myStore", { keyPath: "id" });
    }
};

request.onsuccess = function(event) {
    const db = event.target.result;
    // 开始一个事务
    const transaction = db.transaction("myStore", "readwrite");
    const store = transaction.objectStore("myStore");

    // 添加数据
    store.add({ id: 1, name: "Alice" });

    // 读取数据
    const getRequest = store.get(1);
    getRequest.onsuccess = function() {
        console.log(getRequest.result); // { id: 1, name: "Alice" }
    };

    // 更新数据
    store.put({ id: 1, name: "Bob" });

    // 删除数据
    store.delete(1);
};

request.onerror = function(event) {
    console.error("Database error: " + event.target.errorCode);
};

本题详细解读

1. 打开或创建数据库

使用 indexedDB.open(databaseName, version) 方法来打开或创建一个 IndexedDB 数据库。如果数据库不存在，则会自动创建。

const request = indexedDB.open("MyDatabase", 1);

2. 处理 onupgradeneeded 事件

当数据库版本发生变化时（例如第一次创建数据库或升级版本），会触发 onupgradeneeded 事件。在这个事件处理程序中，可以创建或修改对象存储空间。

request.onupgradeneeded = function(event) {
    const db = event.target.result;
    if (!db.objectStoreNames.contains("myStore")) {
        db.createObjectStore("myStore", { keyPath: "id" });
    }
};

3. 处理 onsuccess 事件

当数据库成功打开时，会触发 onsuccess 事件。在这个事件处理程序中，可以开始事务并操作数据。

// www.javascriptcn.com code example
request.onsuccess = function(event) {
    const db = event.target.result;
    const transaction = db.transaction("myStore", "readwrite");
    const store = transaction.objectStore("myStore");

    // 添加数据
    store.add({ id: 1, name: "Alice" });

    // 读取数据
    const getRequest = store.get(1);
    getRequest.onsuccess = function() {
        console.log(getRequest.result); // { id: 1, name: "Alice" }
    };

    // 更新数据
    store.put({ id: 1, name: "Bob" });

    // 删除数据
    store.delete(1);
};

4. 处理 onerror 事件

如果数据库操作过程中发生错误，会触发 onerror 事件。在这个事件处理程序中，可以处理错误。

request.onerror = function(event) {
    console.error("Database error: " + event.target.errorCode);
};

5. 事务操作

在 onsuccess 事件处理程序中，可以通过 db.transaction(storeName, mode) 方法开始一个事务。事务模式可以是 readonly 或 readwrite。

const transaction = db.transaction("myStore", "readwrite");
const store = transaction.objectStore("myStore");

6. 数据操作

在事务中，可以通过 add()、get()、put() 和 delete() 方法来添加、读取、更新和删除数据。

store.add({ id: 1, name: "Alice" }); // 添加数据
store.get(1); // 读取数据
store.put({ id: 1, name: "Bob" }); // 更新数据
store.delete(1); // 删除数据