HTML lokale opslag

HTML lokale opslag: beter dan cookies.

Wat is HTML lokale opslag?

Via lokale opslag (Local Storage) kunnen webtoepassingen gegevens lokaal opslaan in de browser van de gebruiker.

Voor HTML5 kon applicatiegegevens alleen in cookies worden opgeslagen, inclusief elke serververzoek. Lokale opslag is veiliger en kan een grote hoeveelheid gegevens lokaal opslaan zonder de prestaties van de website te beïnvloeden.

Verschillend van cookies, is de opslaglimiet veel groter (ten minste 5MB), en de informatie wordt niet naar de server gestuurd.

Lokale opslag wordt via oorsprong (origin) (via domein en protocol) gebruikt. Alle pagina's, van oorsprong, kunnen dezelfde gegevens opslaan en toegang krijgen.

Browserondersteuning

De array in de tabel geeft de eerste browserversie aan die lokale opslag volledig ondersteunt.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML lokale opslag objecten

HTML lokale opslag biedt twee objecten om gegevens op de client te slaan:

  • window.localStorage - slaat gegevens op zonder verloopdatum
  • window.sessionStorage - slaat gegevens op voor een sessie (de gegevens worden verwijderd wanneer de browser tabblad wordt gesloten)

Controleer de browserondersteuning voor localStorage en sessionStorage bij het gebruik van lokale opslag:

if (typeof(Storage) !== "undefined") {
    // Code voor localStorage/sessionStorage
} else {
    // Excuses, Web Storage wordt niet ondersteund ..
}

localStorage-object

Het localStorage-object slaat gegevens op zonder verloopdatum. De gegevens worden niet verwijderd wanneer de browser wordt gesloten en zijn beschikbaar op de volgende dag, week of jaar.

Voorbeeld

// Opslaan
localStorage.setItem("lastname", "Gates");
// Ophalen
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Probeer het zelf

Voorbeeldverklaring:

  • Maak een localStorage naam/waarde paar aan, waarbij: name="lastname", value="Gates"
  • Haal de waarde van "lastname" op en plak deze in het element met id="result".

Het voorbeeld kan ook zo worden geschreven:

// Opslaan
localStorage.lastname = "Gates";
// Ophalen
document.getElementById("result").innerHTML = localStorage.lastname;

De syntaxis om een "lastname" localStorage-item te verwijderen is als volgt:

localStorage.removeItem("lastname");

Opmerking: Naam/waarde paren worden altijd als string opgeslagen. Vergeet niet ze om te zetten naar een andere indeling als nodig!

Het volgende voorbeeld telt het aantal keer dat de gebruiker op de knop klikt. De waarde string wordt in een numerieke waarde omgezet en de teller wordt geleidelijk verhoogd:

Voorbeeld

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "U hebt deze knop al geklikt " +
localStorage.clickcount + " keer.";

Probeer het zelf

sessionStorage Object

Het sessionStorage-object is equivalent aan het localStorage-object, maar verschilt in dat het alleen data opslaat voor een session. Als de gebruiker een specifieke browser tab sluit, worden de gegevens ook verwijderd.

Het volgende voorbeeld telt de klikken van de gebruiker op de knop in de huidige session:

Voorbeeld

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "In deze session hebt u deze knop al geklikt " +
sessionStorage.clickcount + " keer.";

Probeer het zelf