Web Components：如何使用 IndexedDB 实现本地存储

Web Components 是一种可重用的、组件化的 web 开发模式，使得前端工程师可以更快速、更轻松地开发和维护 web 应用。而本地存储则在 web 应用中扮演着重要的角色，为用户提供更好的用户体验。IndexedDB 是 HTML5 新添加的本地存储标准，提供了一种异步的事务性数据访问 API，它的出现使得 web 应用可以更可靠、更快速地使用本地存储。在本文中，我们将详细讲解如何使用 IndexedDB 实现本地存储。

IndexedDB 简介

IndexedDB 是浏览器端的本地数据库，在现代浏览器中都支持。它提供了本地存储、事务性的数据访问等 API，使得 web 应用可以使用本地存储，保证了离线访问的可靠性和速度。IndexedDB 数据库由多个对象仓库组成，每个对象仓库可以存储相同类型的对象。IndexedDB 使用键值对存储数据，每个对象仓库可以根据不同的索引来快速查找数据。

使用 IndexedDB 实现本地存储

IndexedDB API 所提供的方法非常灵活，但是也相对复杂，我们可以按照如下步骤来实现简单的本地存储：创建数据库、创建对象仓库、添加数据、查询数据、更新数据、删除数据。

创建数据库

首先我们需要创建一个数据库，在 IndexedDB 中，数据库是由版本号和数据库名称组成的，如果你使用的是一个新的数据库名称，则会创建一个新的数据库，代码如下所示：

const dbName = "myDB";
const request = indexedDB.open(dbName, 1);
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
};
request.onerror = function(event) {
  console.log("数据库创建失败！");
};
request.onsuccess = function(event) {
  console.log("数据库创建成功！");
};

上述代码中我们使用 IndexedDB 的 open 方法来打开数据库，如果数据库不存在，在打开时会立即创建。同时我们也指定了数据库的版本号和名称。当数据库结构有改变时（例如：更新对象仓库、删除对象仓库等），会触发 onupgradeneeded 事件，我们可以在此事件中创建、更新对象仓库。

创建对象仓库

IndexedDB 中的数据存储在对象仓库中，我们需要创建一个新的对象仓库并指定一个 keyPath（键），以便于在后续的数据操作中进行数据检索：

const dbName = "myDB";
const request = indexedDB.open(dbName, 1);
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
};
request.onerror = function(event) {
  console.log("数据库创建失败！");
};
request.onsuccess = function(event) {
  console.log("数据库创建成功！");
};

在上述代码中，我们使用 IndexedDB 的 createObjectStore 方法创建了一个名为 myObjectStore 的新的对象仓库，并指定了对象的 keyPath 为 id。

添加数据

添加数据是 IndexedDB 中最常见的操作之一，我们可以使用对象仓库提供的 add、put 方法进行添加操作，add 方法只能添加不存在的数据，put 方法则可以添加新数据或更新已存在的数据。

const dbName = "myDB";
const request = indexedDB.open(dbName, 1);
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
};
request.onerror = function(event) {
  console.log("数据库创建失败！");
};
request.onsuccess = function(event) {
  const db = event.target.result;
  const objectStore = db.transaction(["myObjectStore"], "readwrite").objectStore("myObjectStore");
  const object = { id: 1, name: "apple", price: 10 };
  const request = objectStore.put(object);
  request.onsuccess = function(event) {
    console.log("数据添加成功！");
  };
  request.onerror = function(event) {
    console.log("数据添加失败！");
  };
};

在上述代码中，我们先打开数据库，然后在成功回调函数中，打开数据事务，并使用 objectStore.put 方法向 myObjectStore 数据库中添加新的数据。在添加数据时，我们需要确认数据是否已经存在，如果存在，则使用 put 方法更新数据，而不是添加新数据。

查询数据

查询数据是我们记录本地数据的原因之一，我们可以使用对象仓库提供的 get、getAll 等方法来查询数据：

const dbName = "myDB";
const request = indexedDB.open(dbName, 1);
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
};
request.onerror = function(event) {
  console.log("数据库创建失败！");
};
request.onsuccess = function(event) {
  const db = event.target.result;
  const objectStore = db.transaction(["myObjectStore"], "readwrite").objectStore("myObjectStore");
  const request = objectStore.get(1);
  request.onsuccess = function(event) {
    const object = event.target.result;
    console.log(object);
  };
  request.onerror = function(event) {
    console.log("数据查询失败！");
  };
};

在上述代码中，我们使用 get 方法获取 key 为 1 的数据，当数据查找成功时，会通过回调函数返回查询结果。如果我们需要获取所有的数据，我们可以使用 getAll 方法。

更新数据

在数据的生命周期中，我们经常需要对数据进行更新操作，我们可以使用 put 方法来实现：

const dbName = "myDB";
const request = indexedDB.open(dbName, 1);
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
};
request.onerror = function(event) {
  console.log("数据库创建失败！");
};
request.onsuccess = function(event) {
  const db = event.target.result;
  const objectStore = db.transaction(["myObjectStore"], "readwrite").objectStore("myObjectStore");
  const request = objectStore.get(1);
  request.onsuccess = function(event) {
    const object = event.target.result;
    object.price = 20;
    const requestUpdate = objectStore.put(object);
    requestUpdate.onsuccess = function(event) {
      console.log("数据更新成功！");
    };
    requestUpdate.onerror = function(event) {
      console.log("数据更新失败！");
    };
  };
};

在上述代码中，我们先使用 get 方法获取 key 为 1 的数据，然后更新 price 属性，最后使用 put 方法更新数据。需要注意的是，在更新数据时需要使用 transaction。

删除数据

删除数据是我们记录本地数据的另一个原因，我们可以使用对象仓库提供的 delete 方法来删除数据：

const dbName = "myDB";
const request = indexedDB.open(dbName, 1);
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });
  objectStore.createIndex("name", "name", { unique: false });
};
request.onerror = function(event) {
  console.log("数据库创建失败！");
};
request.onsuccess = function(event) {
  const db = event.target.result;
  const objectStore = db.transaction(["myObjectStore"], "readwrite").objectStore("myObjectStore");
  const request = objectStore.delete(1);
  request.onsuccess = function(event) {
    console.log("数据删除成功！");
  };
  request.onerror = function(event) {
    console.log("数据删除失败！");
  };
};

在上述代码中，我们通过对象仓库的 delete 方法删除 key 为 1 的数据。

总结

在本篇文章中，我们详细讲解了如何使用 IndexedDB 实现本地存储。IndexedDB 提供了强大的接口来实现本地存储，可以帮助我们解决 web 应用中的一些数据存储问题，并提高 web 应用的性能和可靠性。需要注意的是，在使用 IndexedDB 进行数据存储时，应该遵循事务处理的原则，保证数据操作的正确性和可靠性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6590cabeeb4cecbf2d60ec4e