HTML-lokal lagring

HTML-lokal lagring: bättre än cookies.

Vad är HTML-lokal lagring?

Genom lokal lagring (Local Storage) kan webbapplikationer lagra data lokalt i användarens webbläsare.

Innan HTML5 kunde applikationsdata endast lagras i cookies, inklusive varje serverförfrågan. Lokal lagring är säkrare och kan lagra stora mängder data lokalt utan att påverka webbplatsens prestanda.

I motsats till cookies är lagringsbegränsningen mycket större (minst 5 MB), och informationen skickas inte till servern.

Lokal lagring går via ursprung (origin) (via domän och protokoll). Alla sidor, från ursprung, kan lagra och komma åt samma data.

Webbläsarstöd

Tabellen visar de första webbläsarversionerna som fullständigt stöder lokalt lagring.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML-lokalt lagringsobjekt

HTML-lokalt lagring erbjuder två objekt för att lagra data på kundsidan:

  • window.localStorage - lagrar data utan utgångsdatum
  • window.sessionStorage - lagrar data för en session (datablad förloras när webbläsartabben stängs)

När du använder lokalt lagring, kontrollera webbläsarens stöd för localStorage och sessionStorage:

if (typeof(Storage) !== "undefined") {
    // Kod för localStorage/sessionStorage
} annars {
    // Ursäkta! Web Storage stöds inte ..
}

localStorage-objektet

localStorage-objektet lagrar data utan utgångsdatum. Datan raderas inte när webbläsaren stängs och är tillgänglig igen dagen, veckan eller året därpå.

Exempel

// Lagra
localStorage.setItem("lastname", "Gates");
// Hämta
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Prova själv

Exempel förklaring:

  • Skapa localStorage-namn/värde-par där: name="lastname", value="Gates"
  • Hämta värdet för "lastname" och infoga det i elementet med id="result"

Exempeln kan också skrivas på följande sätt:

// Lagra
localStorage.lastname = "Gates";
// Hämta
document.getElementById("result").innerHTML = localStorage.lastname;

Syntaxen för att ta bort "lastname"-objektet från localStorage är följande:

localStorage.removeItem("lastname");

Kommentarer: Namn/värde-par lagras alltid som strängar. Kom ihåg att konvertera dem till andra format om det behövs!

Följande exempel räknar antalet gånger användaren klickar på en knapp. I koden konverteras strängvärden till numeriska värden och antalet räknas upp i tur och ordning:

Exempel

om (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} annars {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Du har klickat på denna knapp " +
localStorage.clickcount + " gånger.";

Prova själv

sessionStorage-objektet

sessionStorage-objektet är lika med localStorage-objektet, men skillnaden är att det endast lagrar data för en session. Om användaren stänger en specifik webbläsartab, kommer data också att tas bort.

Följande exempel räknar antalet gånger användaren klickar på en knapp under den aktuella sessionen:

Exempel

om (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} annars {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Under denna session har du klickat på denna knapp " +
sessionStorage.clickcount + " gånger.";

Prova själv