JavaScript
Summary - IndexedDB
Build an app that persistently stores notes data using IndexedDB.
Summary - IndexedDB flow
An IndexedDB flow has four steps: open, build the structure, do the work, receive the result. First you open the database with indexedDB.open; inside onupgradeneeded you create stores and indexes.
Then you start a transaction with db.transaction, call add, get or getAll through objectStore, and read the result with request.onsuccess.
Exercise Open NotesDB, create the store and add a note
Open the 'NotesDB' database at version 1 with indexedDB.open and assign it to request. In request.onupgradeneeded, read event.target.result into db and create the 'notes' store with { keyPath: 'id' }. In request.onsuccess, read event.target.result into db, open a 'readwrite' transaction, get objectStore('notes') and call add with { id: 1, text: 'First note' }.
Show example solution
const request = indexedDB.open('NotesDB', 1);
request.onupgradeneeded = function(event) {
const db = event.target.result;
db.createObjectStore('notes', { keyPath: 'id' });
};
request.onsuccess = function(event) {
const db = event.target.result;
const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');
store.add({ id: 1, text: 'First note' });
};
Summary - key points
The essentials of IndexedDB: an asynchronous API, transaction-based access, object stores for record collections, keyPath for the key field, and indexes for fast lookups. Structure changes happen only inside onupgradeneeded.
Data is persistent in the browser; even large objects and files can be stored. Use console.log to print intermediate values and trace the flow.
Exercise Fetch all notes
Open a 'readonly' transaction on the 'notes' store with db.transaction and assign it to tx. Assign tx.objectStore('notes').getAll() to a request variable. Inside request.onsuccess, log request.result with console.log.
Show example solution
const tx = db.transaction('notes', 'readonly');
const request = tx.objectStore('notes').getAll();
request.onsuccess = function(event) {
console.log(request.result);
};
Test yourself
-
Which method overwrites an existing record?
- store.put
- store.add
- store.set
- store.update
Show answer
store.put — Correct! store.put overwrites an existing record, or inserts if missing.
-
Match the IndexedDB pipeline
- indexedDB.open
- open the database
- onupgradeneeded
- build the structure
- db.transaction
- start a transaction
- store.add
- add a record
- request.onsuccess
- receive the result
Next lesson: MutationObserver
