Hentning, indstilling og fjernelse af elementer
Brug Web Storage API til at læse og skrive data
Hentning, indstilling og fjernelse af elementer er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
Storage API'ets grænseflade
Både localStorage og sessionStorage udstiller de samme fire grundlæggende metoder: getItem(key), setItem(key, value), removeItem(key) og clear(). De er enkle nøgle-værdi-lagre, der understøttes af browseren.
setItem gemmer strenge
localStorage.setItem("theme", "dark") gemmer en streng under nøglen "theme". Både nøglen og værdien skal være strenge — værdier, der ikke er strenge, omdannes via String(), før de gemmes, hvilket lydløst ødelægger objekter og arrayer.
localStorage.setItem("theme", "dark");
localStorage.setItem("count", "42");Lagring af objekter med JSON
Hvis du vil gemme strukturerede data, skal du serialisere dem med JSON: localStorage.setItem("user", JSON.stringify(user)). Læs dem tilbage: const user = JSON.parse(localStorage.getItem("user")). Omslut altid parsing med try/catch, hvis den gemte værdi er ugyldig.
const user = { name: "Ada", age: 30 };
localStorage.setItem("user", JSON.stringify(user));
const loaded = JSON.parse(localStorage.getItem("user"));getItem returnerer streng eller null
getItem("missing") returnerer null, når nøglen ikke findes — aldrig undefined. Brug nullish coalescing-operatoren til at angive standardværdier: const theme = localStorage.getItem("theme") ?? "light".
Syntaks til egenskabsadgang
Du kan også bruge notation med kantede parenteser og punktum: localStorage.theme = "dark" og localStorage["theme"]. Begge dele fungerer, men skjuler hensigten — foretræk de eksplicitte metodekald, som tydeligt viser, at dette er vedvarende lagring og ikke en objektegenskab.
removeItem og clear
localStorage.removeItem("theme") sletter en enkelt nøgle. localStorage.clear() sletter alle nøgler for den aktuelle origin. clear() er destruktiv — kald den aldrig uden en stærk grund; den fjerner data, der er angivet af alle scripts på siden.
Gennemløb af gemte nøgler
Brug localStorage.length og localStorage.key(index) til at gennemgå alle gemte nøgler, eller brug Object.keys(localStorage) med spread-operatoren. Det er nyttigt til migreringer, fejlfinding og præfiksbaseret oprydning, f.eks. når alle nøgler, der starter med "cache:", skal fjernes.
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
console.log(key, localStorage.getItem(key));
}Fejl ved overskredet kvote
Browsere tildeler cirka 5-10 MB pr. origin. Hvis kvoten overskrides, kastes en QuotaExceededError. Omslut setItem med try/catch, når du gemmer potentielt store værdier som billedcaches eller dokumentkladder, så fejlen ikke får programmet til at gå ned.
try {
localStorage.setItem("draft", largeString);
} catch (e) {
if (e.name === "QuotaExceededError") {
// free space, warn user, or fall back
}
}Navnerum for nøgler
Lagringen deles på tværs af hele origin'en. Sæt et app- eller funktionsnavn foran dine nøgler (app:settings, cart:items) for at undgå kollisioner med andre scripts, tredjepartsbiblioteker og browserudvidelser, der kører på den samme origin.
Synkron og blokerende
Storage API'et er fuldt ud synkront — hvert kald blokerer hovedtråden, indtil diskens I/O er fuldført. Undgå at gemme meget store datablokke eller kalde setItem i tætte løkker; saml i stedet opdateringerne i ét serialiseret objekt.
sessionStorage sammenlignet med localStorage
Samme API-flade, forskellig levetid. sessionStorage ryddes, når fanen lukkes; localStorage bevares på tværs af genstarter af browseren. Vælg sessionStorage til midlertidig tilstand i en guide og localStorage til brugerpræferencer, der skal overleve en genindlæsning.
Videnstjek
Hvad returnerer localStorage.getItem("missing-key"), når nøglen aldrig er blevet angivet?
Opsummering
getItem, setItem, removeItem og clear er Web Storages fire grundelementer. Værdier er altid strenge, så omslut strukturerede data med JSON. Planlæg håndtering af null-returværdier og QuotaExceededError, og brug navnerum, så du kan dele origin'en hensynsfuldt med andre scripts.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Hentning, indstilling og fjernelse af elementer” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “Hentning, indstilling og fjernelse af elementer”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Hentning, indstilling og fjernelse af elementer”?
Brug Web Storage API til at læse og skrive data Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Hentning, indstilling og fjernelse af elementer”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- localStorage kontra sessionStorage
- Hentning, indstilling og fjernelse af elementer
- Lytning efter storage-hændelser
- Sikkerhed: hvad De aldrig bør gemme i storage