前端indexDB使用指南

IndexedDB 是一种在浏览器中存储大量结构化数据的 Web API。它提供了一种高效地存储和检索数据的方式，特别适用于离线应用程序或需要处理大量数据的场景。

IndexedDB 的工作原理类似于关系型数据库，但是它是在客户端中运行的，并且使用对象存储而不是表。与传统的数据库不同，IndexedDB 使用的是键值对的方式来存储数据。

当使用 IndexedDB 编写前端代码时，你需要遵循以下步骤：

1. 打开数据库连接：

var request = indexedDB.open('myDatabase', 1);

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

request.onupgradeneeded = function(event) {
  var db = event.target.result;
  var objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });
  // 可以创建索引等操作
};

request.onsuccess = function(event) {
  var db = event.target.result;
  // 可以在这里执行其他操作
};

2. 在数据库中创建对象存储空间：

var transaction = db.transaction(["myObjectStore"], "readwrite");
var objectStore = transaction.objectStore("myObjectStore");

var data = { id: 1, name: "John Doe", age: 30 };

var request = objectStore.add(data);

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

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

3. 读取数据：

var transaction = db.transaction(["myObjectStore"], "readonly");
var objectStore = transaction.objectStore("myObjectStore");

var request = objectStore.get(1);

request.onsuccess = function(event) {
  var data = event.target.result;
  console.log("Name: " + data.name + ", Age: " + data.age);
};

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

4. 更新数据：

var transaction = db.transaction(["myObjectStore"], "readwrite");
var objectStore = transaction.objectStore("myObjectStore");

var request = objectStore.get(1);

request.onsuccess = function(event) {
  var data = event.target.result;
  data.age = 31;

  var updateRequest = objectStore.put(data);

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

  updateRequest.onerror = function(event) {
    console.log("Error updating data");
  };
};

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

5. 删除数据：

var transaction = db.transaction(["myObjectStore"], "readwrite");
var objectStore = transaction.objectStore("myObjectStore");

var request = objectStore.delete(1);

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

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

以上只是 IndexedDB 的一些基本操作示例，你可以根据具体需求进行扩展和调整。请记住，IndexedDB 是异步的，所以你需要适当处理成功和错误的回调函数。