IndexedDB 从入门到精通，手把手带你揭秘数据库奥秘

前端

2023-09-10 10:02:00

IndexedDB：从入门到精通

概述

IndexedDB 是一种在浏览器中存储数据的 NoSQL 数据库。它是一个低级别的 API，允许你直接操作数据，而无需使用任何 ORM 或其他抽象层。IndexedDB 非常强大，可以存储大量数据，并且具有很高的性能。

基本概念

对象存储

IndexedDB 中的数据存储在对象存储中。对象存储是一个可以包含多个对象的集合。每个对象都是一个键值对，键是对象的唯一标识符，值是对象的数据。

索引

索引是对象存储中的特殊结构，它可以帮助你快速查找数据。索引可以根据对象的键或值来创建。

事务

事务是一组原子操作。这意味着事务中的所有操作要么全部成功，要么全部失败。事务可以确保数据的一致性。

使用 IndexedDB

打开数据库

要使用 IndexedDB，首先需要打开数据库。你可以使用以下代码来打开数据库：

const request = indexedDB.open('my-database');

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

request.onerror = function(event) {
  console.error('Error opening database:', event.target.errorCode);
};

创建对象存储

要创建对象存储，你可以使用以下代码：

const request = db.createObjectStore('my-object-store', { keyPath: 'id' });

request.onsuccess = function(event) {
  console.log('Object store created successfully');
};

request.onerror = function(event) {
  console.error('Error creating object store:', event.target.errorCode);
};

添加数据

要向对象存储中添加数据，你可以使用以下代码：

const transaction = db.transaction('my-object-store', 'readwrite');
const objectStore = transaction.objectStore('my-object-store');

const request = objectStore.add({ id: 1, name: 'John Doe' });

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

request.onerror = function(event) {
  console.error('Error adding data:', event.target.errorCode);
};

获取数据

要从对象存储中获取数据，你可以使用以下代码：

const transaction = db.transaction('my-object-store', 'readonly');
const objectStore = transaction.objectStore('my-object-store');

const request = objectStore.get(1);

request.onsuccess = function(event) {
  const data = event.target.result;
  console.log('Data retrieved successfully:', data);
};

request.onerror = function(event) {
  console.error('Error retrieving data:', event.target.errorCode);
};

删除数据

要从对象存储中删除数据，你可以使用以下代码：

const transaction = db.transaction('my-object-store', 'readwrite');
const objectStore = transaction.objectStore('my-object-store');

const request = objectStore.delete(1);

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

request.onerror = function(event) {
  console.error('Error deleting data:', event.target.errorCode);
};