HTML Web Storage API
HTML-webberging; beter as koekies.
Wat is HTML-webberging?
Met webberging kan webtoepassings data plaaslik binne die gebruiker se blaaier stoor.
Voor HTML5 moes toepassingsdata in koekies gestoor word, ingesluit by elke bedienerversoek. Webberging is veiliger, en groot hoeveelhede data kan plaaslik gestoor word, sonder om webwerfprestasie te beïnvloed.
Anders as koekies, is die bergingslimiet baie groter (ten minste 5MB) en inligting word nooit na die bediener oorgedra nie.
Webberging is per oorsprong (per domein en protokol). Alle bladsye, van een oorsprong, kan dieselfde data stoor en toegang verkry.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat Webberging ten volle ondersteun.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML-webbergingsvoorwerpe
HTML-webberging bied twee voorwerpe vir die stoor van data op die kliënt:
window.localStorage- stoor data sonder vervaldatumwindow.sessionStorage- stoor data vir een sessie (data gaan verlore wanneer die blaaieroortjie gesluit is)
Kontroleer blaaierondersteuning vir localStorage en sessionStorage voordat u webberging gebruik:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
Die localStorage Object
Die localStorage-objek stoor die data sonder vervaldatum. Die data sal nie uitgevee word wanneer die blaaier gesluit is nie, en sal die volgende dag, week of jaar beskikbaar wees.
Voorbeeld
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Voorbeeld verduidelik:
- Skep 'n localStorage naam/waarde-paar met naam="van" en waarde="Smith"
- Haal die waarde van "van" op en voeg dit by die element in met id="result"
Die voorbeeld hierbo kan ook so geskryf word:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
Die sintaksis vir die verwydering van die "van" localStorage-item is soos volg:
localStorage.removeItem("lastname");
Let wel: Naam/waarde-pare word altyd as stringe gestoor. Onthou om dit na 'n ander formaat om te skakel wanneer nodig!
Die volgende voorbeeld tel die aantal kere wat 'n gebruiker op 'n knoppie geklik het. In hierdie kode word die waardestring na 'n getal omgeskakel om die teller te kan verhoog:
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).";
Die sessieStoorvoorwerp
Die sessionStorageobjek is gelyk aan die localStorage-objek, behalwe
dat dit die data vir slegs een sessie stoor. Die data word uitgevee wanneer die gebruiker die spesifieke blaaieroortjie toemaak.
Die volgende voorbeeld tel die aantal kere wat 'n gebruiker 'n knoppie in die huidige sessie geklik het:
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.";