From bb6de25eb6388de754f4c0cc43624e6e13d8d20d Mon Sep 17 00:00:00 2001 From: Prince Yadav <85881452+ulquix@users.noreply.github.com> Date: Thu, 20 Nov 2025 22:53:25 +0530 Subject: [PATCH] feat(curriculum): add interactive examples to IndexedDB lesson (#63992) --- .../6733ffb59c62ee4a23522efe.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md b/curriculum/challenges/english/blocks/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md index b4faa28a1ec..7a767b74c9e 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-client-side-storage-and-crud-operations/6733ffb59c62ee4a23522efe.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: what-is-indexeddb-and-how-does-it-work --- -# --description-- +# --interactive-- `IndexedDB` is a tool for storing structured data in the browser. This is built into modern web browsers, allowing web apps to store and fetch JavaScript objects efficiently. @@ -15,6 +15,8 @@ Now, let's look at how `IndexedDB` works. The first step is to open a database. Here's an example: +:::interactive_editor + ```js let request = indexedDB.open("Sample DB", 1); @@ -28,6 +30,8 @@ request.onsuccess = function(event) { }; ``` +::: + In this code, we're opening a database named `"Sample DB"` with version 1. We provide two callback functions: one for handling errors, and another for when the database is successfully opened. The `db` object we get in the success callback is what we'll use to interact with the database. If you check the browser dev tools application interface, you will see your `Sample DB` in the `IndexedDb` section has been opened. Once you have your database open, you can start working with object stores. @@ -35,6 +39,8 @@ If you check the browser dev tools application interface, you will see your `Sam Object stores in IndexedDB are similar to tables in traditional databases. They hold the actual data you want to store. Here's how to create an object store: ```js +let request = indexedDB.open("Sample DB", 1); + request.onupgradeneeded = function(event) { let db = event.target.result; let objectStore = db.createObjectStore("customers", { keyPath: "id" });