---
title: "How would you store and retrieve JSON data in IndexedDB?"  
description: "How would you store and retrieve JSON data in IndexedDB?"  
author: "ICSM Computer"  
published: 2025-06-30  
updated: 2025-06-30  
canonical: https://www.mindstick.com/interview/34296/how-would-you-store-and-retrieve-json-data-in-indexeddb  
category: "database"  
tags: ["database", "indexeddb"]  
reading_time: 4 minutes  

---

# How would you store and retrieve JSON data in IndexedDB?

Storing and retrieving **JSON data** in **IndexedDB** is straightforward because IndexedDB can store **JavaScript objects** directly — including parsed JSON objects.

## Step-by-Step: Store & Retrieve JSON in IndexedDB

### 1. Store JSON Data

Let’s say you have a JSON object:

```javascript
const jsonData = {
    id: 1,
    name: "John Doe",
    email: "john@example.com",
    skills: ["JS", "CSS", "HTML"]
};
```

You can store it directly:

```javascript
function storeJsonData(db, storeName, data) {
    return new Promise((resolve, reject) => {
        const tx = db.transaction(storeName, 'readwrite');
        const store = tx.objectStore(storeName);

        const request = store.put(data); // `put` will add or update based on keyPath

        request.onsuccess = () => resolve(request.result);
        request.onerror = (e) => reject(`Store error: ${e.target.errorCode}`);
    });
}
```

### 2. Retrieve JSON Data

```javascript
function getJsonData(db, storeName, id) {
    return new Promise((resolve, reject) => {
        const tx = db.transaction(storeName, 'readonly');
        const store = tx.objectStore(storeName);

        const request = store.get(id);

        request.onsuccess = () => resolve(request.result);
        request.onerror = (e) => reject(`Get error: ${e.target.errorCode}`);
    });
}
```

### 3. Full Example with Usage

```javascript
(async () => {
    const dbName = "JsonDB";
    const storeName = "Users";

    const jsonData = {
        id: 1,
        name: "John Doe",
        email: "john@example.com",
        skills: ["JS", "CSS", "HTML"]
    };

    // Open DB
    const db = await new Promise((resolve, reject) => {
        const request = indexedDB.open(dbName, 1);

        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            if (!db.objectStoreNames.contains(storeName)) {
                db.createObjectStore(storeName, { keyPath: 'id' });
            }
        };

        request.onsuccess = () => resolve(request.result);
        request.onerror = (e) => reject(`DB open error: ${e.target.errorCode}`);
    });

    // Store JSON
    await storeJsonData(db, storeName, jsonData);
    console.log("Stored JSON data");

    // Retrieve JSON
    const stored = await getJsonData(db, storeName, 1);
    console.log("Retrieved JSON data:", stored);
})();
```

## Optional: Store Raw JSON as String

If you prefer to store raw JSON strings instead of parsed objects:

```javascript
const rawJson = JSON.stringify(jsonData);
store.put({ id: 1, json: rawJson });
```

.and later:

```javascript
const result = await getJsonData(db, storeName, 1);
const parsed = JSON.parse(result.json);
```

## Summary

- You can store plain JavaScript objects (parsed JSON).
- Use `put()` to insert/update, and `get()` to retrieve.
- JSON strings can also be stored if needed — just serialize with `JSON.stringify()`.

## Answers

### Answer by ICSM Computer

Storing and retrieving **JSON data** in **IndexedDB** is straightforward because IndexedDB can store **JavaScript objects** directly — including parsed JSON objects.

## Step-by-Step: Store & Retrieve JSON in IndexedDB

### 1. Store JSON Data

Let’s say you have a JSON object:

```javascript
const jsonData = {
    id: 1,
    name: "John Doe",
    email: "john@example.com",
    skills: ["JS", "CSS", "HTML"]
};
```

You can store it directly:

```javascript
function storeJsonData(db, storeName, data) {
    return new Promise((resolve, reject) => {
        const tx = db.transaction(storeName, 'readwrite');
        const store = tx.objectStore(storeName);

        const request = store.put(data); // `put` will add or update based on keyPath

        request.onsuccess = () => resolve(request.result);
        request.onerror = (e) => reject(`Store error: ${e.target.errorCode}`);
    });
}
```

### 2. Retrieve JSON Data

```javascript
function getJsonData(db, storeName, id) {
    return new Promise((resolve, reject) => {
        const tx = db.transaction(storeName, 'readonly');
        const store = tx.objectStore(storeName);

        const request = store.get(id);

        request.onsuccess = () => resolve(request.result);
        request.onerror = (e) => reject(`Get error: ${e.target.errorCode}`);
    });
}
```

### 3. Full Example with Usage

```javascript
(async () => {
    const dbName = "JsonDB";
    const storeName = "Users";

    const jsonData = {
        id: 1,
        name: "John Doe",
        email: "john@example.com",
        skills: ["JS", "CSS", "HTML"]
    };

    // Open DB
    const db = await new Promise((resolve, reject) => {
        const request = indexedDB.open(dbName, 1);

        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            if (!db.objectStoreNames.contains(storeName)) {
                db.createObjectStore(storeName, { keyPath: 'id' });
            }
        };

        request.onsuccess = () => resolve(request.result);
        request.onerror = (e) => reject(`DB open error: ${e.target.errorCode}`);
    });

    // Store JSON
    await storeJsonData(db, storeName, jsonData);
    console.log("Stored JSON data");

    // Retrieve JSON
    const stored = await getJsonData(db, storeName, 1);
    console.log("Retrieved JSON data:", stored);
})();
```

## Optional: Store Raw JSON as String

If you prefer to store raw JSON strings instead of parsed objects:

```javascript
const rawJson = JSON.stringify(jsonData);
store.put({ id: 1, json: rawJson });
```

.and later:

```javascript
const result = await getJsonData(db, storeName, 1);
const parsed = JSON.parse(result.json);
```

## Summary

- You can store plain JavaScript objects (parsed JSON).
- Use `put()` to insert/update, and `get()` to retrieve.
- JSON strings can also be stored if needed — just serialize with `JSON.stringify()`.


---

Original Source: https://www.mindstick.com/interview/34296/how-would-you-store-and-retrieve-json-data-in-indexeddb

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.