JavaScript Academy · Les

Transacties en CRUD

Voeg records toe, lees ze, werk ze bij en verwijder ze.

Les 2 van 413 stappen

Transacties en CRUD is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.

Alles is een transactie

In IndexedDB vinden alle lees- en schrijfbewerkingen plaats binnen een transactie. Een transactie groepeert bewerkingen, zodat ze allemaal slagen of allemaal worden teruggedraaid. Zo blijven de gegevens consistent.

Een transactie starten

Maak er een met db.transaction(storeNames, mode). De modus is 'readonly' (standaard) of 'readwrite' voor wijzigingen.

const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');

De objectopslag ophalen

Haal vanuit de transactie de objectopslag op waarmee je wilt werken via tx.objectStore(name). Alle CRUD-methoden staan op deze objectopslag.

const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');
// store.add / get / put / delete

Records toevoegen

store.add(value) voegt een nieuw record in. Dit mislukt als er al een record met dezelfde sleutel bestaat, zodat onbedoeld overschrijven wordt voorkomen.

const store = tx.objectStore('notes');
const req = store.add({ id: 1, text: 'Buy milk' });
req.onsuccess = () => console.log('added with key', req.result);

Een record lezen

store.get(key) haalt één record op aan de hand van de sleutel. Het resultaat komt bij onsuccess van het verzoek binnen als request.result (undefined als het record niet is gevonden).

const req = store.get(1);
req.onsuccess = () => {
  console.log('record:', req.result);
};

Bijwerken met put

store.put(value) voegt een record in of vervangt het. In tegenstelling tot add overschrijft dit een bestaand record met dezelfde sleutel, waardoor het ideaal is voor updates.

store.put({ id: 1, text: 'Buy milk and eggs' });
// Replaces the existing record with id 1.

Een record verwijderen

store.delete(key) verwijdert het record met de opgegeven sleutel. Dit slaagt zelfs als er geen record met die sleutel bestaat.

const req = store.delete(1);
req.onsuccess = () => console.log('deleted');

Een objectopslag leegmaken

store.clear() verwijdert alle records in de objectopslag in één keer. Gebruik dit om gegevens in de cache te resetten.

store.clear();
// All records in 'notes' are removed.

Een transactie voltooien

De transactie zelf activeert oncomplete wanneer al zijn bewerkingen zijn vastgelegd, en onerror of onabort als er iets mislukt. Gebruik oncomplete om te weten dat schrijfbewerkingen blijvend zijn.

tx.oncomplete = () => console.log('all changes saved');
tx.onerror = () => console.log('transaction failed');

Gedrag van automatisch vastleggen

Transacties worden automatisch vastgelegd wanneer de besturing terugkeert naar de gebeurtenislus en er geen openstaande verzoeken zijn. Je kunt een transactie niet openhouden tijdens await van niet-gerelateerd asynchroon werk; voer alle bewerkingen op de objectopslag samen uit.

// Queue operations synchronously within the same tx:
store.add({ id: 2, text: 'A' });
store.add({ id: 3, text: 'B' });
// Both commit together when tx completes.

Overzicht van CRUD

De vier kernbewerkingen sluiten netjes op elkaar aan:

Create: add
Read: get
Update: put
Delete: delete

Alles gebeurt binnen een transactie die de consistentie garandeert.

Korte controle

Test je begrip van transacties en CRUD.

Beantwoord dit in de interactieve les

Samenvatting

Je hebt transacties en CRUD geleerd:

Begin met db.transaction(store, mode).
Haal de opslag op met tx.objectStore(name).
add voegt in, get leest, put voegt in of werkt bij, en delete verwijdert.
Resultaten komen binnen via de onsuccess van elk verzoek.
tx.oncomplete bevestigt dat de wijzigingen zijn opgeslagen.

Hierna volgen indexen en query's.

Gratis beginnen

Leer JavaScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 59
Lessen: 200

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Transacties en CRUD” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Transacties en CRUD”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Transacties en CRUD”?

Voeg records toe, lees ze, werk ze bij en verwijder ze. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met JavaScript Academy te beginnen?

Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Transacties en CRUD”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?

Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar JavaScript Academy