JavaScript Academy · Lektion

Lagra och läsa data

Använd setItem, getItem och removeItem.

Lektion 1 av 413 steg

Lagra och läsa data är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Webbläsarens nyckel-värdelagring

Web Storage ger varje origin en enkel nyckel-värdelagring i webbläsaren. De två API:erna, localStorage och sessionStorage, har samma metoder och lagrar endast strängar.

Skriv med setItem

Spara ett värde med setItem(key, value). Båda argumenten är strängar.

localStorage.setItem("theme", "dark");
localStorage.setItem("username", "ada");

Läs med getItem

Hämta ett värde med getItem(key). Om nyckeln inte finns returneras null, inte undefined.

const theme = localStorage.getItem("theme"); // "dark"
const missing = localStorage.getItem("nope"); // null

Åtkomst via egenskaper

Du kan också läsa och skriva som med objektegenskaper, men metodformen är tydligare och undviker krockar med inbyggda namn. Föredra metoderna.

localStorage.theme = "light";       // works
console.log(localStorage.theme);    // "light"

Ta bort en post

Ta bort en enskild post med removeItem(key). Att ta bort en nyckel som inte finns har ingen effekt och orsakar inget fel.

localStorage.removeItem("username");

Rensa allt

clear() tar bort alla nycklar för den aktuella origin. Använd den försiktigt; det går inte att ångra.

localStorage.clear();

Allt är en sträng

Lagringen innehåller endast strängar. Tal och booleska värden omvandlas automatiskt till text. Läs tillbaka dem som strängar och konvertera dem efter behov.

localStorage.setItem("count", 5);
const n = localStorage.getItem("count"); // "5" (string)
const num = Number(n);                    // 5

Räkna nycklar

Egenskapen length anger hur många nycklar som lagras, och key(index) returnerar namnet på en viss position. Det är användbart vid iterering.

console.log(localStorage.length);
const firstKey = localStorage.key(0);

Iterera över lagringen

Gå igenom alla lagrade nycklar med length och key(). Läs varje värde under tiden.

for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  console.log(k, localStorage.getItem(k));
}

Kontrollera om en nyckel finns

Eftersom en saknad nyckel returnerar null kan förekomsten testas med en enkel jämförelse.

if (localStorage.getItem("token") !== null) {
  console.log("user has a token");
}

Endast för samma origin

Lagringen är knuten till origin (schema + värd + port). En webbplats kan inte läsa en annan webbplats lagring, och http respektive https räknas som olika origin.

Snabbkontroll

Läsa och skriva i Web Storage.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Web Storage är en strängbaserad nyckel-värdelagring per origin. Använd setItem, getItem (returnerar null om nyckeln saknas), removeItem och clear. Iterera med length och key(i). Allt är en sträng, så typer måste konverteras manuellt, och lagringen är isolerad per origin.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Lagra och läsa data” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Lagra och läsa data”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Lagra och läsa data”?

Använd setItem, getItem och removeItem. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Lagra och läsa data”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy