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 cookie, inklusive varje serverförfrågan. Lokal lagring är säkrare och kan lagra stora mängder data lokalt utan att påverka webbplatsens prestanda.

Omvänd från cookie, är lagringsbegränsningen mycket större (minst 5MB), och informationen överförs inte till servern.

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

Webbläsarstöd

Tabellen visar den första webbläsarversionen 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å klientsidan:

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

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

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

localStorage-objektet

localStorage-objektet lagrar data utan utgångsdatum. Dessa data tas bort inte när webbläsaren stängs och är tillgängliga 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 på användning:

  • Skapa localStorage-namn/värde-par där: name="lastname", value="Gates"
  • Hämta värdet "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!

Exempel på att räkna antalet gånger användaren klickar på en knapp. I koden konverteras strängvärden till numeriska värden och räkningen ökas successivt:

Exempel

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

Prova själv

sessionStorage-objektet

sessionStorage-objektet är lika med localStorage-objektet, men skiljer sig genom att endast lagra 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 knappen " +
sessionStorage.clickcount + " gånger.";

Prova själv