IndexedDB存储数据

 一、介绍

IndexedDB是一种原生JavaScript数据库，允许您在Web浏览器中存储和检索大量数据，而无需使用服务器或任何其他插件。

IndexedDB可以存储任意类型的数据，并且可以使用索引进行高效地查询。它支持事务和版本控制，允许您管理数据库的架构和版本。它还具有较高的可扩展性和可靠性，可以在离线模式下使用。

使用IndexedDB，您可以存储应用程序数据，例如用户配置，优先事项列表，离线内容等。它也可以用于较大的Web应用程序，例如图像和视频编辑器，以及支持实时协作的应用程序。

 二、案例

IndexedDB存储数据可以分为以下步骤：

1. 打开或创建数据库：使用indexedDB.open()方法打开或创建数据库。如果数据库不存在，则创建新的数据库。

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

1. 处理数据库打开成功或失败的事件：根据事件的结果来判断是否成功打开或创建数据库。

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

request.onerror = function(event) {
  console.log("Database error: " + event.target.errorCode);
}

1. 创建数据存储对象：使用createObjectStore()方法创建数据存储对象。可以为对象存储指定一个名称和一组键值对，或者不指定键值对。

const objectStore = db.createObjectStore("customers", { keyPath: "id" });
objectStore.createIndex("name", "name", { unique: false });

1. 添加、更新或删除数据：使用对象存储对象的add(), put()或delete()方法来添加、更新或删除数据。

// 添加数据
const customer = { id: 123, name: "John Doe", email: "john.doe@example.com" };
const addRequest = objectStore.add(customer);
addRequest.onsuccess = function(event) {
  console.log("Data added successfully");
}

// 更新数据
customer.email = "johndoe@example.com";
const updateRequest = objectStore.put(customer);
updateRequest.onsuccess = function(event) {
    console.log("Data updated successfully");
};

// 删除数据
const deleteRequest = objectStore.delete(123);
deleteRequest.onsuccess = function(event) {
  console.log("Data deleted successfully");
}

1. 查询数据：使用对象存储对象的get()或index()方法查询数据。get()方法可以使用keyPath查询数据，index()方法可以使用索引查询数据。

// 使用主键查询数据
const getRequest = objectStore.get(123);
getRequest.onsuccess = function(event) {
  console.log("Data retrieved successfully");
  const customer = event.target.result;
}

// 使用索引查询数据
const index = objectStore.index("name");
const getRequestByName = index.get("John Doe");
getRequestByName.onsuccess = function(event) {
  console.log("Data retrieved successfully");
  const customer = event.target.result;
}

下面是一个完整的示例代码，演示创建索引、添加数据、使用索引查询数据。

const dbName = 'myDatabase';
const dbVersion = 1;
let db;

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

request.onerror = function(event) {
  console.log("Database error: " + event.target.errorCode);
}

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

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

  const customer = { id: 123, name: "John Doe", email: "john.doe@example.com" };
  const addRequest = objectStore.add(customer);
  addRequest.onsuccess = function(event) {
    console.log("Data added successfully");
  }

  const index = objectStore.createIndex("name", "name", { unique: false });
  const getRequestByName = index.get("John Doe");
  getRequestByName.onsuccess = function(event) {
    console.log("Data retrieved successfully");
    const customer = event.target.result;
    console.log(customer);
  }
}

需要注意的是，IndexedDB需要一些JavaScript编程知识，因此可能需要一些学习和实践才能熟练使用。