IndexedDB

IndexedDB is a concept in web development that provides a low-level API for storing large amounts of structured data in the browser. This feature allows for complex queries and transactions, making it suitable for storing significant amounts of data, such as large files and structured data, in a way that is accessible through indexed searches.

IndexedDB是在Web开发中的一个概念，它提供了一个低级API，用于在浏览器中存储大量结构化数据。这个特性允许进行复杂的查询和事务处理，使其适合存储大量数据，例如大文件和结构化数据，并能够通过索引搜索进行访问。

Here’s how you can use IndexedDB in JavaScript:

以下是如何在JavaScript中使用IndexedDB：

// Open a database
const request = indexedDB.open('myDatabase', 1);

request.onupgradeneeded = function(event) {
  const db = event.target.result;
  const objectStore = db.createObjectStore('myObjectStore', { keyPath: 'id' });
};

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

  // Start a transaction
  const transaction = db.transaction('myObjectStore', 'readwrite');
  const objectStore = transaction.objectStore('myObjectStore');

  // Add data
  objectStore.add({ id: 1, name: 'John Doe', age: 30 });

  // Retrieve data
  const getRequest = objectStore.get(1);

  getRequest.onsuccess = function(event) {
    console.log(getRequest.result);
  };
};

This code will create a database, add an object, and retrieve that object from the database:

这段代码将创建一个数据库，添加一个对象，并从数据库中检索该对象：

// Output: { id: 1, name: 'John Doe', age: 30 }

IndexedDB can also handle complex data operations such as transactions across multiple object stores:

IndexedDB还可以处理复杂的数据操作，例如跨多个对象存储的事务处理：

// Example of transaction across multiple object stores
const transaction = db.transaction(['store1', 'store2'], 'readwrite');
const store1 = transaction.objectStore('store1');
const store2 = transaction.objectStore('store2');

// Perform operations on both stores
store1.put({ id: 1, data: 'data1' });
store2.put({ id: 2, data: 'data2' });

This code will output:

这段代码的输出将是：

// Objects stored in store1 and store2

The comparison of IndexedDB methods is shown in the table below:

IndexedDB方法的比较如下表所示：

IndexedDB is very useful for offline web applications, caching large amounts of data, and storing complex, structured data.

IndexedDB在离线Web应用程序、大量数据缓存和存储复杂的结构化数据时非常有用。

以下是关于IndexedDB的5个面试问题及其答案

1. What is IndexedDB, and how does it differ from local storage and session storage?

什么是IndexedDB，它与本地存储和会话存储有何不同？

IndexedDB is a low-level API for storing large amounts of structured data and allows complex queries and transactions. Unlike local storage and session storage, it can store large files and perform indexed searches.

IndexedDB是一个低级API，用于存储大量结构化数据，并允许复杂的查询和事务处理。与本地存储和会话存储不同，它可以存储大文件并执行索引搜索。

2. How do you create and open a database in IndexedDB?

如何在IndexedDB中创建和打开数据库？

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

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

3. What are the advantages of using IndexedDB?

使用IndexedDB的优势是什么？

IndexedDB allows storing large amounts of data, handling complex transactions, and performing indexed searches, making it suitable for large-scale applications.

IndexedDB允许存储大量数据、处理复杂事务并执行索引搜索，这使其适用于大规模应用程序。

4. Can you explain how to retrieve data from an object store in IndexedDB?

你能解释如何从IndexedDB中的对象存储中检索数据吗？

const getRequest = objectStore.get(1);

const getRequest = objectStore.get(1);

5. How would you handle transactions across multiple object stores in IndexedDB?

你如何在IndexedDB中处理跨多个对象存储的事务？

const transaction = db.transaction(['store1', 'store2'], 'readwrite');

const transaction = db.transaction(['store1', 'store2'], 'readwrite');

Recommended Resources:

1. MDN Web Docs: IndexedDB
2. W3Schools: Web Storage API