IndexedDB - 删除数据

IndexedDB - 删除数据

删除数据是数据库的基本操作。在 IndexedDB 中，您可以使用 .delete() 方法从对象仓库 (object store) 中移除记录。此操作，与所有数据修改一样，必须在“读写”事务 ('readwrite' transaction) 中执行。

语法

const request = objectStore.delete(key);

.delete() 方法接受您希望移除的记录的主键 (primary key)。它返回一个 IDBRequest 对象。您可以监听此请求的 success 事件来确认删除操作。

示例：按键删除记录

本示例演示了一种现代的、结构化的方法来填充数据库、删除特定项，然后验证结果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>IndexedDB Deleting Data</title>
</head>
<body>
  <h1>Check the console for output.</h1>
  <div id="output"></div>

  <script>
    const DB_NAME = "TodoAppDB";
    const DB_VERSION = 1;
    const STORE_NAME = "tasks";
    const outputDiv = document.getElementById('output');

    // Helper to open the database
    function openDB() {
      return new Promise((resolve, reject) => {
        const request = indexedDB.open(DB_NAME, DB_VERSION);
        request.onupgradeneeded = event => {
          const db = event.target.result;
          if (!db.objectStoreNames.contains(STORE_NAME)) {
            db.createObjectStore(STORE_NAME, { keyPath: "id", autoIncrement: true });
          }
        };
        request.onsuccess = () => resolve(request.result);
        request.onerror = () => reject(request.error);
      });
    }

    // Helper to perform a transaction
    async function performTransaction(storeName, mode, action) {
        const db = await openDB();
        return new Promise((resolve, reject) => {
            const transaction = db.transaction(storeName, mode);
            const store = transaction.objectStore(storeName);
            action(store, resolve, reject);
            transaction.onerror = () => reject(transaction.error);
        });
    }

    // Add initial data
    async function populateData() {
        console.log("Populating initial data...");
        const tasks = [
            { text: "Learn IndexedDB", completed: true },
            { text: "Build a PWA", completed: false }, // This will get id: 2
            { text: "Deploy the app", completed: false }
        ];
        // The action for the transaction
        const addAction = (store, resolve) => {
            tasks.forEach(task => store.add(task));
            resolve();
        };
        await performTransaction(STORE_NAME, 'readwrite', addAction);
        console.log("Data populated.");
    }

    // Delete an item by its key
    async function deleteTask(key) {
        console.log(`Attempting to delete task with key: ${key}`);
        const deleteAction = (store, resolve) => {
            const request = store.delete(key);
            request.onsuccess = () => {
                console.log(`Task ${key} deleted successfully.`);
                resolve();
            }
        };
        await performTransaction(STORE_NAME, 'readwrite', deleteAction);
    }

    // Get all remaining items to verify
    async function getAllTasks() {
        const getAction = (store, resolve) => {
            const request = store.getAll();
            request.onsuccess = () => resolve(request.result);
        };
        return await performTransaction(STORE_NAME, 'readonly', getAction);
    }

    async function main() {
      try {
        await populateData();
        let tasks = await getAllTasks();
        console.log("Tasks before deletion:", tasks);
        outputDiv.innerHTML += `<p>Before: ${JSON.stringify(tasks)}</p>`;

        // Let's delete the task with key 2 ('Build a PWA')
        await deleteTask(2);

        tasks = await getAllTasks();
        console.log("Tasks after deletion:", tasks);
        outputDiv.innerHTML += `<p>After deleting item with key 2: ${JSON.stringify(tasks)}</p>`;

      } catch (error) {
        console.error("An error occurred in main execution:", error);
      }
    }

    // Clear DB on start for a clean run
    indexedDB.deleteDatabase(DB_NAME).onsuccess = main;

  </script>
</body>
</html>

最佳实践

• 封装逻辑： 为数据库操作创建辅助函数（例如 openDB、deleteItem）。这使您的主要应用程序逻辑更清晰、更易读。
• 验证删除： 在删除操作之后，再次获取数据以确保状态符合您的预期，尤其是在开发过程中，这是一个很好的实践。
• 批量删除： 要删除多条记录，您可以使用游标 (cursor) 进行迭代，并对每个符合您条件的记录调用 cursor.delete()。要删除所有记录，objectStore.clear() 方法比逐个删除更高效。