浏览器存储方案之IndexedDB

我们常用的浏览器存储时cookies，Web Storage（localStorage 和 sessionStorage），除此之外还有IndexedDB

IndexedDB 是一种在浏览器中存储结构化数据的客户端数据库，它提供了一种持久化存储数据的机制，可以用于存储大量的数据并支持查询。下面是 IndexedDB 的详细讲解、原理以及用法示例：

原理：IndexedDB 是一个基于事件的数据库系统，它允许你存储和检索结构化数据。它采用了异步操作和事务机制来保证数据的完整性和一致性。IndexedDB 使用对象存储空间来存储数据，每个对象存储空间类似于数据库的表，存储的数据是键值对。

用法示例：

首先，我们需要打开或创建一个数据库，然后创建一个对象存储空间，最后可以在对象存储空间中进行数据的增、删、改、查等操作。

// 打开或创建一个名为 "myDatabase" 的数据库
const request = indexedDB.open("myDatabase", 1);

// 创建对象存储空间和索引
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  
  // 创建一个名为 "users" 的对象存储空间，指定主键为 "id"
  const objectStore = db.createObjectStore("users", { keyPath: "id" });
  
  // 创建一个名为 "email" 的索引，用于快速查询邮箱
  objectStore.createIndex("email", "email", { unique: true });
};

// 打开数据库成功后的回调函数
request.onsuccess = function(event) {
  const db = event.target.result;
  
  // 在事务中进行数据操作
  const transaction = db.transaction(["users"], "readwrite");
  const objectStore = transaction.objectStore("users");
  
  // 添加数据
  objectStore.add({ id: 1, name: "Alice", email: "alice@example.com" });
  objectStore.add({ id: 2, name: "Bob", email: "bob@example.com" });

  // 查询数据
  const getUserRequest = objectStore.get(1);
  getUserRequest.onsuccess = function() {
    const user = getUserRequest.result;
    console.log("User:", user);
  };
  
  // 使用索引查询数据
  const emailIndex = objectStore.index("email");
  const getUserByEmailRequest = emailIndex.get("alice@example.com");
  getUserByEmailRequest.onsuccess = function() {
    const user = getUserByEmailRequest.result;
    console.log("User by Email:", user);
  };

  // 完成事务
  transaction.oncomplete = function() {
    db.close();
  };
};

// 打开数据库失败后的回调函数
request.onerror = function(event) {
  console.error("Database error:", event.target.error);
};

上面的示例演示了如何创建一个 IndexedDB 数据库，创建对象存储空间和索引，以及如何在事务中进行数据操作。注意，IndexedDB 是异步操作，所以需要使用回调函数来处理操作结果。

IndexedDB 的用法较为复杂，需要考虑到异步操作、事务的管理、版本升级等问题。在实际项目中，通常会封装一些工具函数来简化 IndexedDB 的操作。