JS操作IndexedDB存储数据|极客笔记

JS操作IndexedDB存储数据

什么是IndexedDB

IndexedDB是一个浏览器本地数据库，用于在客户端存储大量结构化数据。它允许你存储和检索键值对，并提供对对象存储空间的操作。IndexedDB是异步的，使得它适用于存储大量的数据或者在后台存储数据而不会影响页面性能。

IndexedDB支持复杂的查询和事务操作，使得它比其他存储方式（如Web Storage）更加灵活和强大。它允许你以键值对的形式存储复杂的数据结构，而不仅限于简单的字符串。

使用IndexedDB存储数据

要使用IndexedDB存储数据，首先需要打开或创建一个数据库，接着创建一个对象存储空间，最后对数据进行增加、删除、修改等操作。

打开或创建一个数据库

首先，我们需要打开或创建一个数据库。下面是一个简单的示例代码：

let db;
const request = indexedDB.open("myDatabase", 1);

request.onerror = function(event) {
  console.log("Error opening database");
};

request.onsuccess = function(event) {
  db = event.target.result;
  console.log("Database opened successfully");
};

request.onupgradeneeded = function(event) {
  db = event.target.result;
  const objectStore = db.createObjectStore("customers", { keyPath: "id", autoIncrement: true });
  console.log("Database upgraded successfully");
};

在这段代码中，我们首先通过 indexedDB.open() 方法来打开一个名为 myDatabase 的数据库。如果数据库不存在，则会创建一个新的数据库。在 onsuccess 回调中，我们获取到了数据库的实例，并输出信息到控制台。在 onupgradeneeded 回调中，我们在数据库中创建了一个名为 customers 的对象存储空间，并指定了一个自增的键。

对象存储空间的操作

一旦打开了数据库并创建了对象存储空间，我们就可以对数据进行增加、删除、修改等操作。下面是一些常见的操作示例：

增加数据

const transaction = db.transaction(["customers"], "readwrite");
const objectStore = transaction.objectStore("customers");

const customer = { name: "Alice", email: "alice@example.com" };
const request = objectStore.add(customer);

request.onsuccess = function(event) {
  console.log("Data added successfully");
};

request.onerror = function(event) {
  console.log("Error adding data");
};

在这段代码中，我们首先通过 transaction() 方法创建一个事务，然后通过 objectStore() 方法获取到了名为 customers 的对象存储空间。接着我们准备了一个名为 customer 的对象，包含了 name 和 email 两个属性，并通过 add() 方法将该对象添加到对象存储空间中。

删除数据

const transaction = db.transaction(["customers"], "readwrite");
const objectStore = transaction.objectStore("customers");

const request = objectStore.delete(1);

request.onsuccess = function(event) {
  console.log("Data deleted successfully");
};

request.onerror = function(event) {
  console.log("Error deleting data");
};

在这段代码中，我们首先创建了一个事务并获取到了对象存储空间，然后通过 delete() 方法删除了键为 1 的数据项。

修改数据

const transaction = db.transaction(["customers"], "readwrite");
const objectStore = transaction.objectStore("customers");

const request = objectStore.get(1);

request.onsuccess = function(event) {
  const customer = event.target.result;
  customer.email = "new-email@example.com";
  const updateRequest = objectStore.put(customer);

  updateRequest.onsuccess = function(event) {
    console.log("Data updated successfully");
  };
};

在这段代码中，我们首先通过 get() 方法获取到了键为 1 的数据项，接着修改了该数据项的 email 属性，最后通过 put() 方法将修改后的数据项更新到对象存储空间中。

查询数据

除了增加、删除、修改数据外，我们还可以使用 get() 方法来查询数据：

const transaction = db.transaction(["customers"], "readonly");
const objectStore = transaction.objectStore("customers");

const request = objectStore.get(1);

request.onsuccess = function(event) {
  const customer = event.target.result;
  console.log(customer);
};

这段代码中，我们只是简单地查询了键为 1 的数据项，并将结果输出到控制台。