HTML -webopslag-API
HTML-webopslag; beter dan koekjes.
Wat is HTML-webopslag?
Met webopslag kunnen webapplicaties gegevens lokaal opslaan in de browser van de gebruiker.
Vóór HTML5 moesten applicatiegegevens worden opgeslagen in cookies, opgenomen in elk serververzoek. Webopslag is veiliger en grote hoeveelheden gegevens kunnen lokaal worden opgeslagen, zonder de prestaties van de website te beïnvloeden.
In tegenstelling tot cookies is de opslaglimiet veel groter (minimaal 5 MB) en wordt er nooit informatie naar de server overgedragen.
Webopslag is per herkomst (per domein en protocol). Alle pagina's, van één oorsprong, kunnen dezelfde gegevens opslaan en openen.
Browserondersteuning
De cijfers in de tabel geven de eerste browserversie aan die webopslag volledig ondersteunt.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
Objecten voor HTML-webopslag
HTML-webopslag biedt twee objecten voor het opslaan van gegevens op de client:
window.localStorage- slaat gegevens op zonder vervaldatumwindow.sessionStorage- slaat gegevens op voor één sessie (gegevens gaan verloren wanneer het browsertabblad wordt gesloten)
Controleer voordat u webopslag gebruikt de browserondersteuning voor localStorage en sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
Het localStorage-object
Het localStorage-object slaat de gegevens op zonder vervaldatum. De gegevens worden niet verwijderd wanneer de browser wordt gesloten en zijn de volgende dag, week of jaar beschikbaar.
Voorbeeld
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Voorbeeld uitgelegd:
- Maak een localStorage naam/waarde-paar met name="achternaam" en value="Smith"
- Haal de waarde van "achternaam" op en voeg deze in het element in met id="result"
Het bovenstaande voorbeeld kan ook als volgt worden geschreven:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
De syntaxis voor het verwijderen van het "achternaam" localStorage-item is als volgt:
localStorage.removeItem("lastname");
Opmerking: Naam/waarde-paren worden altijd opgeslagen als strings. Vergeet niet om ze indien nodig naar een ander formaat te converteren!
Het volgende voorbeeld telt het aantal keren dat een gebruiker op een knop heeft geklikt. In deze code wordt de waardestring omgezet naar een getal om de teller te kunnen verhogen:
Voorbeeld
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
Het sessieOpslagobject
Het sessionStorageobject is gelijk aan het localStorage-object, behalve
dat het de gegevens voor slechts één sessie opslaat. De gegevens worden verwijderd wanneer de gebruiker het specifieke browsertabblad sluit.
Het volgende voorbeeld telt het aantal keren dat een gebruiker in de huidige sessie op een knop heeft geklikt:
Voorbeeld
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";