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 grote hoeveelheden 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 via oorsprong (origin) (via domein en protocol). 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 - Opslaan van gegevens zonder expiratiedatum
  • window.sessionStorage - Gebruikt om gegevens op te slaan 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 expiratiedatum. 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 vorige voorbeeld kan ook zo worden geschreven:

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

De syntaxis om een item in localStorage met de naam "lastname" te verwijderen, is als volgt:

localStorage.removeItem("lastname");

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

Het volgende voorbeeld telt het aantal keer dat de gebruiker op de knop klikt. De waarde van de tekenreeks wordt in een getal omgezet en de teller wordt stapsgewijs 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 daarin dat het alleen data voor een session opslaat. Als de gebruiker een specifieke browserkaart 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