DOM & Local Storage

Wat is Local Storage?

Local Storage is een simpele manier om data op te slaan in de browser. De data blijft staan, ook als de gebruiker de tab sluit.

Wanneer gebruik je Local Storage?

• Gebruikersinstellingen (thema, taal)
• Formulier data bewaren
• Winkelwagen items
• Inlogstatus of laatst bezochte pagina

localStorage.setItem() en localStorage.getItem()

// Data opslaan
localStorage.setItem('gebruikersnaam', 'jan123');

// Data ophalen
const gebruiker = localStorage.getItem('gebruikersnaam');
console.log(gebruiker); // 'jan123'

// Als data niet bestaat, krijg je null
const nietBestaand = localStorage.getItem('bestaat-niet');
console.log(nietBestaand); // null

Instelling opslaan

localStorage.setItem('thema', 'donker');

const opgeslagenThema = localStorage.getItem('thema');
if (opgeslagenThema === 'donker') {
  document.body.classList.add('dark-mode');
}

Data verwijderen

// Verwijder één item
localStorage.removeItem('gebruikersnaam');

// Verwijder alles
localStorage.clear();

DOM manipulatie en input values

Met de DOM kun je elementen opzoeken, waardes lezen en tekst op de pagina aanpassen.

Element selecteren

const inputElement = document.querySelector('#naam-input');
const outputElement = document.querySelector('#welkom-bericht');

Input waarde ophalen

<input type="text" id="naam-input">

const naamInput = document.querySelector('#naam-input');
const ingevoerdeNaam = naamInput.value;

if (ingevoerdeNaam === '') {
  alert('Voer een naam in');
}

Tekst weergeven

<p id="welkom-bericht"></p>

const welkomElement = document.querySelector('#welkom-bericht');

welkomElement.textContent = 'Welkom Jan';
welkomElement.innerHTML = '<strong>Welkom Jan</strong>';

Input leeg maken

document.querySelector('#naam-input').value = '';

Compleet DOM voorbeeld

function slaOpNaam() {
  const naam = document.querySelector('#naam-input').value;

  if (naam === '') {
    alert('Voer eerst een naam in');
    return;
  }

  localStorage.setItem('gebruikersnaam', naam);

  document.querySelector('#welkom-bericht').textContent =
    `Naam '${naam}' opgeslagen`;

  document.querySelector('#naam-input').value = '';
}

Loading state & lege staat

Als je data ophaalt met fetch, duurt dat even. Een loading state laat de gebruiker weten dat er iets gebeurt. Een lege staat geeft een nette melding als er geen resultaten zijn.

Loading state — tonen en verbergen

<p id="laden">Laden...</p>
<section id="resultaten"></section>

const laden = document.querySelector('#laden');
const resultaten = document.querySelector('#resultaten');

// Toon de loading state vóór fetch
laden.style.display = 'block';

fetch('./data.json')
  .then(response => response.json())
  .then(data => {
    // Verberg de loading state zodra data er is
    laden.style.display = 'none';

    // Toon de data
    resultaten.innerHTML = data.map(item =>
      `<article>${item.naam}</article>`
    ).join('');
  })
  .catch(error => {
    laden.style.display = 'none';
    resultaten.textContent = 'Er ging iets mis. Probeer het opnieuw.';
  });

Lege staat — geen resultaten

Als een filter of zoekopdracht niets oplevert, toon je een nette melding in plaats van een lege pagina.

const toonResultaten = (items) => {
  const container = document.querySelector('#resultaten');

  // Controleer of de array leeg is
  if (items.length === 0) {
    container.innerHTML = '<p class="leeg">Geen resultaten gevonden.</p>';
    return;
  }

  container.innerHTML = items.map(item =>
    `<article>${item.naam}</article>`
  ).join('');
};

Lege staat met zoekterm

const zoekInput = document.querySelector('#zoekbalk');
const container = document.querySelector('#resultaten');

zoekInput.addEventListener('input', () => {
  const zoekterm = zoekInput.value.toLowerCase();

  const gevonden = producten.filter(product =>
    product.naam.toLowerCase().includes(zoekterm)
  );

  if (gevonden.length === 0) {
    container.innerHTML = `<p class="leeg">Geen resultaten voor "${zoekInput.value}".</p>`;
    return;
  }

  container.innerHTML = gevonden.map(product =>
    `<article>${product.naam}</article>`
  ).join('');
});

JSON.stringify() en JSON.parse()

Local Storage werkt alleen met strings. Voor objecten en arrays gebruik je JSON.

const gebruiker = { naam: 'Jan', leeftijd: 25 };
localStorage.setItem('gebruikerData', gebruiker); // fout

Object opslaan en ophalen

const gebruiker = { naam: 'Jan', leeftijd: 25 };

localStorage.setItem('gebruikerData', JSON.stringify(gebruiker));

const opgehaald = JSON.parse(localStorage.getItem('gebruikerData'));
console.log(opgehaald.naam); // 'Jan'

Wat doet JSON.stringify()

const object = { naam: 'Jan', leeftijd: 25 };
const string = JSON.stringify(object);
// '{"naam":"Jan","leeftijd":25}'

Wat doet JSON.parse()

const string = '{"naam":"Jan","leeftijd":25}';
const object = JSON.parse(string);
// object.naam → 'Jan'

Voorbeeld met array

const favorieten = ['appel', 'banaan', 'druif'];
localStorage.setItem('favorieten', JSON.stringify(favorieten));

const lijst = JSON.parse(localStorage.getItem('favorieten'));
lijst.push('peer');

Winkelwagen voorbeeld

function voegToeAanWinkelwagen(product) {
  let winkelwagen =
    JSON.parse(localStorage.getItem('winkelwagen')) || [];

  winkelwagen.push(product);

  localStorage.setItem('winkelwagen',
    JSON.stringify(winkelwagen)
  );
}

voegToeAanWinkelwagen({ naam: 'Laptop', prijs: 899 });

Formulier data opslaan: compleet voorbeeld

HTML

<form>
  <input type="text" id="naam" placeholder="Naam">
  <input type="email" id="email" placeholder="Email">
  <input type="number" id="leeftijd" placeholder="Leeftijd">

  <button type="button" onclick="slaProfielOp()">Opslaan</button>
  <button type="button" onclick="laadProfiel()">Laden</button>
</form>

JavaScript

function slaProfielOp() {
  const naam = document.querySelector('#naam').value;
  const email = document.querySelector('#email').value;
  const leeftijd = document.querySelector('#leeftijd').value;

  if (naam === '' || email === '') {
    alert('Naam en email zijn verplicht');
    return;
  }

  const profiel = { naam, email, leeftijd };

  localStorage.setItem('gebruikerProfiel',
    JSON.stringify(profiel)
  );

  alert('Profiel opgeslagen');
}

function laadProfiel() {
  const profielString = localStorage.getItem('gebruikerProfiel');

  if (!profielString) {
    alert('Geen profiel gevonden');
    return;
  }

  const profiel = JSON.parse(profielString);

  document.querySelector('#naam').value = profiel.naam;
  document.querySelector('#email').value = profiel.email;
  document.querySelector('#leeftijd').value = profiel.leeftijd;

  alert('Profiel geladen');
}

Error handling met try/catch

Bij kapotte JSON of volle storage kan er een fout ontstaan. try/catch voorkomt dat je app crasht.

try {
  const data = JSON.parse(localStorage.getItem('complexData'));
  console.log(data);
} catch (error) {
  console.log('Fout bij het ophalen van data', error);
}

Corrupte data

localStorage.setItem('slechteData', 'dit is geen JSON');

try {
  const data = JSON.parse(localStorage.getItem('slechteData'));
} catch (error) {
  console.log('JSON is kapot', error);
}

Helper functies

function veiligOpslaan(key, value) {
  try {
    localStorage.setItem(key, JSON.stringify(value));
    return true;
  } catch (error) {
    console.error('Fout bij opslaan', error);
    return false;
  }
}

function veiligOphalen(key, standaard = null) {
  try {
    const data = localStorage.getItem(key);
    return data ? JSON.parse(data) : standaard;
  } catch (error) {
    console.error('Fout bij ophalen', error);
    return standaard;
  }
}

Samenvatting