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 lagres i cookies, herunder hver serverforespørgsel. Lokal lagring er mere sikker og kan gemme store mængder data lokalt uden at påvirke websitets ydeevne.

I modsætning til cookies er lagerbegrænsningen meget større (mindst 5MB), og informationen overføres ikke til serveren.

Lokal lagring gennem oprindelsesstedet (origin) (gennem domæne og protokol). Alle sider, fra oprindelsesstedet, kan lagre 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 lagringsobjekter

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 (data tabes, når browserfanebladet lukkes)

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

if (typeof(Storage) !== "undefined") {
    // Kode til localStorage/sessionStorage
} else {
    // Desværre! Web Storage er ikke understøttet ..
}

localStorage-objektet

localStorage-objektet gemmer data uden udløbsdato. Når browseren lukkes, slettes data ikke, og de er tilgængelige igen 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 en localStorage navne/værdipar, hvor: name="lastname", value="Gates"
  • Hent værdien "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ætningen til at slette "lastname" localStorage-elementet er som følger:

localStorage.removeItem("lastname");

Bemærk: Navne/værdipar gemmes altid som strenge. Hvis nødvendigt 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 tal, og tællingen øges derefter successivt:

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 being 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