深入浅出，带你轻松掌握IndexedDB

2023-09-01 08:17:40

IndexedDB简介

IndexedDB 是一个基于 HTML5 的 API，可让您在浏览器中存储数据，即使用户关闭浏览器或断开网络连接，数据也不会丢失。IndexedDB 的目标是允许 Web 应用程序存储大量数据，并以高性能的方式检索数据，同时提供事务管理和索引等高级功能。

IndexedDB 的优点

IndexedDB 有许多优点，包括：

高性能： IndexedDB 可以快速存储和检索数据，即使是大量数据。
数据持久化： IndexedDB 中的数据即使在浏览器关闭或断开网络连接后也会保留。
事务管理： IndexedDB 支持事务管理，这允许您执行一组原子操作，确保要么所有操作都成功，要么所有操作都失败。
索引： IndexedDB 支持索引，这允许您快速搜索数据，即使是大量数据。

IndexedDB 的缺点

IndexedDB 也有一个缺点，即它不能跨浏览器使用。也就是说，在 Chrome 浏览器中创建的 IndexedDB 数据库无法在 Firefox 浏览器中访问。

IndexedDB 的使用

要使用 IndexedDB，您需要创建一个数据库。数据库可以被细分为对象存储，每个对象存储包含一个或多个键值对。

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

request.onsuccess = function(event) {
  const db = event.target.result;
};

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

一旦创建了数据库，您就可以使用它来存储数据。

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

const objectStore = transaction.objectStore("myObjectStore");

const request = objectStore.add({name: "John Doe", age: 30});

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

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

要检索数据，可以使用 get() 方法。

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

const objectStore = transaction.objectStore("myObjectStore");

const request = objectStore.get(1);

request.onsuccess = function(event) {
  const data = event.target.result;

  console.log("Data retrieved successfully: " + data.name);
};

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