# IndexedDB

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. It uses indexes to enable high-performance searches of this data.

## 1. Key Concepts

Unlike `localStorage` which stores simple key-value strings synchronously, IndexedDB is:
*   **Transactional:** All operations happen within a transaction.
*   **Asynchronous:** Operations don't block the main thread.
*   **NoSQL:** It stores JavaScript objects, not tables with rows/columns.
*   **Object-Oriented:** Data is stored in "Object Stores".

## 2. Opening a Database

You open a database using `indexedDB.open()`. This request triggers events (`success`, `error`, `upgradeneeded`).

```javascript
const request = indexedDB.open("MyDatabase", 1);

request.onerror = (event) => {
  console.error("Database error:", event.target.errorCode);
};

request.onupgradeneeded = (event) => {
  // This triggers if the client has no DB or a lower version.
  // This is where you create object stores.
  const db = event.target.result;
  
  // Create an object store named "customers" with "ssn" as the key path
  const objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
  
  // Create an index to search customers by name
  objectStore.createIndex("name", "name", { unique: false });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  console.log("Database opened successfully");
};
```

## 3. Adding Data

To add data, you start a transaction, get the object store, and call `add()`.

```javascript
function addCustomer(db) {
  const transaction = db.transaction(["customers"], "readwrite");
  const objectStore = transaction.objectStore("customers");
  
  const customer = { ssn: "123-45-678", name: "John Doe", email: "john@example.com" };
  const request = objectStore.add(customer);
  
  request.onsuccess = () => {
    console.log("Customer added to the store", request.result);
  };
}
```

## 4. Retrieving Data

You can retrieve data by key or use an index.

```javascript
function getCustomer(db, ssn) {
  const transaction = db.transaction(["customers"]);
  const objectStore = transaction.objectStore("customers");
  const request = objectStore.get(ssn);
  
  request.onsuccess = () => {
    console.log("Customer:", request.result);
  };
}
```

## 5. Promises Wrapper

The native API is event-based. Modern development often uses libraries like `idb` to wrap IndexedDB in Promises, allowing `async/await`.

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/web-storage]]
[[programming/javascript/vanilla/promises-async-await]]