HTML lokal lagring

HTML lokal lagring: bedre end cookies.

Hvad er HTML lokal lagring?

Gennem lokal lagring (Local Storage) kan webapplikationer gemme data lokalt i brugerens browser.

Før HTML5 kunne applikationsdata kun gemmes i cookie, herunder hver serverforespørgsel. Lokal lagring er mere sikker og kan gemme store mængder data lokalt uden at påvirke websitets ydeevne.

Forskellig fra cookie, er lagringsbegrænsningen meget større (mindst 5MB), og informationen sendes ikke til serveren.

Lokal lagring via oprindelsessted (origin) (via domæne og protokol). Alle sider, fra oprindelsesstedet, kan gemme og få adgang til samme data.

Browserunderstøttelse

Tabellen viser den første browserversion, der fuldt ud understøtter lokal lagring.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML lokal lagringsobjekt

HTML lokal lagring tilbyder to objekter til lagring af data på klienten:

  • window.localStorage - gemmer data uden udløbsdato
  • window.sessionStorage - gemmer data for en session (dataene tabes, når browserens faneblad lukkes)

Når du bruger lokal lagring, skal du kontrollere browserens understøttelse af localStorage og sessionStorage:

if (typeof(Storage) !== "undefined") {
    // Kode for localStorage/sessionStorage
} else {
    // Undskyld! Web Storage understøttes ikke ..
}

localStorage-objektet

localStorage-objektet gemmer data uden udløbsdato. Når browseren lukkes, slettes data ikke, og de er tilgængelige dagen, ugen eller året efter.

Example

// Gem
localStorage.setItem("lastname", "Gates");
// Hent
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Try it yourself

Eksempel på forklaring:

  • Opret localStorage navne/værdipar, hvor: name="lastname", value="Gates"
  • Hent værdien af "lastname" og indsæt den i elementet med id="result"

Eksemplet kan også skrives sådan:

// Gem
localStorage.lastname = "Gates";
// Hent
document.getElementById("result").innerHTML = localStorage.lastname;

Sådan slettes "lastname" localStorage-elementet:

localStorage.removeItem("lastname");

Kommentarer: Navne/værdipar gemmes altid som strenge. Hvis du har brug for det, skal du huske at konvertere dem til andre formater!

Dette eksempelet tæller antallet af gange, brugeren klikker på en knap. I koden konverteres værdistringen til et numerisk værdi, og tællingen øges herefter trin for trin:

Example

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked this button " +
localStorage.clickcount + " times.";

Try it yourself

sessionStorage object

The sessionStorage object is equivalent to the localStorage object, the difference is that it only stores data for one session. If the user closes a specific browser tab, the data will also be deleted.

The following example counts the number of times the user clicks the button in the current session:

Example

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "In this session, you have clicked this button " +
sessionStorage.clickcount + " times.";

Try it yourself