IndexedDB - 创建数据

IndexedDB: 创建和修改数据

IndexedDB 中的所有数据操作（创建、读取、更新、删除 - CRUD）都必须在事务（transaction）中进行。事务通过将一组操作组合成一个单一的原子单元来确保数据完整性。如果事务中的任何操作失败，则整个操作集都会回滚。本章重点介绍数据的创建和更新。

事务生命周期

要执行任何数据操作，你必须遵循以下四个步骤：

获取数据库连接： 成功打开数据库。
启动事务： 在连接对象上调用 db.transaction()。
获取对象存储： 在该事务中请求访问一个或多个对象存储。
执行操作： 在对象存储实例上调用 add()、put()、get() 或 delete() 等方法。

事务是自动提交的。一旦你发出所有请求且这些请求都已完成，并且没有更多请求待处理时，事务就会自动提交并变为非活动状态。

创建事务

你可以使用 db.transaction() 方法创建事务：

const transaction = db.transaction(storeNames, mode);

storeNames: 一个字符串或字符串数组，指定要访问的对象存储。
mode: 一个字符串，指定事务类型。最常见的模式是：
- readonly: 用于读取数据。这是默认模式，允许多个并行事务。
- readwrite: 用于添加、更新或删除数据。这会锁定指定的对象存储，阻止对它们进行其他 readwrite 事务。

使用 `add()` 和 `put()` 添加和更新数据

一旦你从事务中获得了对象存储实例，你就可以添加或更新数据：

objectStore.add(data)： 将 data 对象添加到存储中。如果已存在具有相同主键的对象，则操作将失败，并且事务的 onerror 处理程序将触发 ConstraintError。
objectStore.put(data)： 将 data 对象添加到存储中。如果已存在具有相同主键的对象，它将被覆盖（更新）。此方法通常被称为“upsert”（更新或插入）。

Both add() 和 put() 都是异步的，并返回一个 IDBRequest 对象。你可以监听此请求的 success 和 error 事件，以了解操作何时完成。

示例：向对象存储添加数据

这个完整示例设置了一个简单的表单，用于向我们的“MyNotesAppDB”数据库添加新笔记。它演示了写入操作的完整事务生命周期。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Add Data to IndexedDB</title>
</head>
<body>
  <h2>Add a New Note</h2>
  <form id="add-note-form">
    <input type="text" id="note-title" placeholder="Note Title" required>
    <textarea id="note-content" placeholder="Content"></textarea>
    <button type="submit">Add Note</n>
  </form>
  <div id="feedback"></div>

  <script>
    const dbName = "MyNotesAppDB";
    const dbVersion = 1;
    const feedbackDiv = document.getElementById('feedback');
    let db;

    const request = indexedDB.open(dbName, dbVersion);

    request.onerror = (event) => console.error(`DB Error: ${event.target.error}`);
    request.onsuccess = (event) => {
      db = event.target.result;
      console.log('Database connection ready.');
    };
    request.onupgradeneeded = (event) => {
      const db = event.target.result;
      if (!db.objectStoreNames.contains('notes')) {
          const objectStore = db.createObjectStore("notes", { keyPath: "id", autoIncrement: true });
          objectStore.createIndex("title", "title", { unique: false });
      }
    };

    document.getElementById('add-note-form').addEventListener('submit', (event) => {
      event.preventDefault();
      if (!db) {
        feedbackDiv.textContent = 'Database is not ready yet.';
        return;
      }

      const title = document.getElementById('note-title').value;
      const content = document.getElementById('note-content').value;

      const newNote = {
        title: title,
        content: content,
        created_at: new Date()
      };

      // 1. 创建事务
      const transaction = db.transaction(['notes'], 'readwrite');

      // 2. 获取对象存储
      const store = transaction.objectStore('notes');

      // 3. 执行操作
      const addRequest = store.add(newNote);

      addRequest.onsuccess = () => {
        feedbackDiv.textContent = `Note '${title}' added successfully!`;
        event.target.reset(); // 清空表单
      };

      addRequest.onerror = (event) => {
        console.error(`Error adding note: ${event.target.error}`);
        feedbackDiv.textContent = 'Error adding note.';
      };

      transaction.oncomplete = () => {
        console.log('Transaction completed: database modification finished.');
      };

      transaction.onerror = (event) => {
        console.error(`Transaction error: ${event.target.error}`);
      };
    });
  </script>
</body>
</html>