JavaScript - IndexedDB

什么是 IndexedDB?

IndexedDB，即索引数据库，是一种低级 JavaScript API。它的功能涉及存储和检索海量结构化数据(包括文件和 Blob)。凭借其与客户端数据库的协同能力，它使 Web 应用程序能够在用户设备上本地存储、查询和修改数据。此功能在构建处理海量数据的 Web 应用程序时尤其有用;无需互联网连接即可运行，离线工作，并通过本地数据缓存提供响应式用户体验。

IndexedDB 的关键概念和功能:

• 异步 API − IndexedDB 依靠事件驱动编程，利用异步 API 来防止主线程阻塞并增强用户体验。

• 数据库 − IndexedDB 数据库作为对象存储的容器，方便数据的组织、检索和删除。

• 对象存储 − 对象存储类似于关系数据库中的表，封装了 JavaScript 对象的集合;它支持 CRUD 操作。

• 索引 − 对象存储中的索引可以提高数据查询的效率，因为它们能够基于特定字段提升搜索和排序性能。

• 事务 − IndexedDB 中的事务执行所有操作，通过使多个操作作为一个单元成功或失败的能力来保证一致性和完整性。

为什么使用 IndexedDB?

Web 开发人员在寻找高效的客户端存储解决方案时，发现 IndexedDB 不可或缺。它的异步特性保证了响应迅速的用户体验:它可以避免主线程阻塞;此外，它通过维护数据完整性来支持事务，这一点值得称赞。IndexedDB 能够在本地管理大量结构化数据;此功能显著增强了离线功能，减少了对持续服务器通信的需求。凭借其灵活的键结构、优化查询的索引支持以及升级模式的能力，它是构建 Web 应用程序的可靠选择。这些应用程序通常需要本地存储、离线支持以及最重要的高效数据管理。

CRUD 操作

现在让我们看看 IndexedDB 的 CRUD 操作代码。

创建/插入操作

要将新记录插入对象存储，您可以使用 IndexedDB 中的 add() 方法。此方法接受 JavaScript 对象或值作为参数，然后将其合并到指定的对象存储中。但是，如果已存在具有相同键参数的条目，则此操作将失败，因此它是保证唯一性的理想选择。

const request = objectStore.add(data);
request.onsuccess = () => {
// Handle success event
};

request.onerror = () => {
// Handle error
};

读取(检索)操作

get() 方法

使用 get() 方法:它从对象存储中检索单个记录，此操作取决于您是否了解目标条目的特定键。

openCursor() 方法

openCursor() 方法启动一个活动游标，用于迭代对象存储中的记录，通过允许处理每个单独的条目，可以提高效率和控制力;这在遍历所述对象存储中存在的所有条目时非常有用。

const request = objectStore.openCursor();
request.onsuccess = (event) => {
   const cursor = event.target.result;
   if (cursor) {
      const data = cursor.value;
      // Process data
      cursor.continue();
   }
};

request.onerror = () => {
   // Handle error
};

更新操作

put() 方法用于更新现有记录，或在键不存在时添加新记录。其多功能性使其非常适合数据操作，特别是更新和插入。

const request = objectStore.put(data);

删除操作

要根据键从对象存储中删除特定记录，必须使用 delete() 方法;此方法提供了一种直接删除条目的方法。

const request = objectStore.delete(key);

实现示例

上述 CRUD 操作的所有重要方法均已在此代码中实现。它以表格形式呈现数据库数据，每条记录都附有删除和更新按钮。点击创建按钮时，屏幕上会显示一个表单创建元素，以便用户将姓名和电子邮件信息插入数据库。默认情况下，此表单保持隐藏状态;它仅在点击按钮时显示，并在任务完成后消失。'prompt()' 方法用于填充详细信息更新表单，此功能为用户提供了便利，因为警报也会显示在同一位置。此外，相关警报用于向用户发出成功事件或错误信号。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: Arial, sans-serif;
         margin: 20px;
      }
      h2 {
         color: #333;
      }

      button {
         padding: 8px;
         margin: 5px;
      }

      #createForm, #updateForm {
         display: none;
         border: 1px solid #ddd;
         padding: 10px;
         margin-bottom: 10px;
      }

      table {
         border-collapse: collapse;
         width: 100%;
         margin-top: 20px;
         width: auto;
      }

      th, td {
         border: 1px solid #dddddd;
         text-align: left;
         padding: 8px;
      }

      th {
         background-color: #f2f2f2;
      }
   </style>
</head>
<body>
   <h2>IndexedDB CRUD Operations</h2>
   <button onclick="showCreateForm()">Create Data</button>
   <div id="createForm" style="display: none;">
      // 默认隐藏，单击创建按钮时显示
      <h3>Create Data</h3>
      <label for="name">Name:</label>
      <input type="text" id="name" required><br><br>
      <label for="email">Email:</label>
      <input type="email" id="email" required><br>
      <button onclick="createData()">Save</button>
      <button onclick="cancelCreate()">Cancel</button>
   </div>
   <table id="data-table">
      <thead>
         <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Actions</th>
         </tr>
      </thead>
      <tbody></tbody>
   </table>
   <script>
      const dbName = "myDatabase";
      let db;
	   // 打开/创建名为 myDatabase 且版本为 11 的 indexedDB
      const request = window.indexedDB.open(dbName, 11);
      request.onerror = (event) => {
         alert("Database error: " + event.target.errorCode);
      };

      request.onsuccess = (event) => {
         db = event.target.result;
         showData();
      };
      request.onupgradeneeded = (event) => {
         db = event.target.result;
         const objectStore = db.createObjectStore("myObjectStore", { keyPath: "id", autoIncrement: true });
         objectStore.createIndex("name", "name", { unique: false });
         objectStore.createIndex("email", "email", { unique: true });
      };
      function showData() {
         //从数据库填充表
         const transaction = db.transaction(["myObjectStore"], "readonly");
         const objectStore = transaction.objectStore("myObjectStore");
         const tableBody = document.querySelector("#data-table tbody");
         tableBody.innerHTML = "";
         const request = objectStore.openCursor();
         request.onsuccess = (event) => {
            const cursor = event.target.result;
            if (cursor) {
               const row = tableBody.insertRow();
               row.insertCell(0).textContent = cursor.value.id;
               row.insertCell(1).textContent = cursor.value.name;
               row.insertCell(2).textContent = cursor.value.email;
               const actionsCell = row.insertCell(3);
               //更新和删除是根据id执行的，因此当点击相应的按钮时，id作为参数传递给函数
               actionsCell.innerHTML = `
               <button onclick="showUpdateForm(${cursor.value.id})">Update</button>
               <button onclick="deleteData(${cursor.value.id})">Delete</button>
                    `;
               cursor.continue();
            }
         };
      }

      function createData() {
         const transaction = db.transaction(["myObjectStore"], "readwrite");
         const objectStore = transaction.objectStore("myObjectStore");
         const name = document.getElementById("name").value;
         const email = document.getElementById("email").value;

         const newData = {
            name: name,
            email: email
         };

         const request = objectStore.add(newData);

         request.onsuccess = () => {
            showData();
            cancelCreate();
            alert("Data added successfully")
         };

         request.onerror = () => {
            alert("Error creating data.");
         };
      }

      function showCreateForm() {
         document.getElementById("createForm").style.display = "block";
      }

      function cancelCreate() {
      //如果用户决定不插入记录。
      document.getElementById("createForm").style.display = "none";
         document.getElementById("name").value = "";
         document.getElementById("email").value = "";
      }

      function showUpdateForm(id) {
         const transaction = db.transaction(["myObjectStore"], "readwrite");
         const objectStore = transaction.objectStore("myObjectStore");

         const request = objectStore.get(id);

         request.onsuccess = (event) => {
            const data = event.target.result;
 
            if (data) {
               const name = prompt("Update Name:", data.name);
               const email = prompt("Update Email:", data.email);

               if (name !== null && email !== null) {
                  data.name = name;
                  data.email = email;

                  const updateRequest = objectStore.put(data);

                  updateRequest.onsuccess = () => {
                     showData();
                     alert("Updated data for "+data.name)
                  };

                  updateRequest.onerror = () => {
                     alert("Error updating data.");
                  };
               }
            }
         };
      }

      function deleteData(id) {
         const transaction = db.transaction(["myObjectStore"], "readwrite");
         const objectStore = transaction.objectStore("myObjectStore");
 
         const request = objectStore.delete(id);
 
         request.onsuccess = () => {
            showData();
            alert("Deleted data for id "+id)
         };

         request.onerror = () => {
            alert("Error deleting data.");
         };
      }
     
   </script>
</body>
</html>

尝试运行上述程序。输出结果中，您将看到一个用于创建、更新和删除数据的界面。操作完成后，新创建或更新的数据将以表格形式显示。