JavaScript 中如何使用 IndexedDB？

推荐答案

-- -------------------- ---- -------
-- --------
----- ------- - ---------------------------- ---

----------------------- - --------------- -
    ----- -- - --------------------
    -- ----------
    -- ------------------------------------------ -
        ------------------------------- - -------- ---- ---
    -
--

----------------- - --------------- -
    ----- -- - --------------------
    -- ------
    ----- ----------- - ------------------------- -------------
    ----- ----- - -----------------------------------

    -- ----
    ----------- --- -- ----- ------- ---

    -- ----
    ----- ---------- - -------------
    -------------------- - ---------- -
        ------------------------------- -- - --- -- ----- ------- -
    --

    -- ----
    ----------- --- -- ----- ----- ---

    -- ----
    ----------------
--

--------------- - --------------- -
    ----------------------- ------ - - ------------------------
--

本题详细解读

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 事件。在这个事件处理程序中，可以开始事务并操作数据。

-- -------------------- ---- -------
----------------- - --------------- -
    ----- -- - --------------------
    ----- ----------- - ------------------------- -------------
    ----- ----- - -----------------------------------

    -- ----
    ----------- --- -- ----- ------- ---

    -- ----
    ----- ---------- - -------------
    -------------------- - ---------- -
        ------------------------------- -- - --- -- ----- ------- -
    --

    -- ----
    ----------- --- -- ----- ----- ---

    -- ----
    ----------------
--

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); // 删除数据