Enkel datalagring
Fra lokal lagring til en rigtig database.
Enkel datalagring er en gratis Vibe-programmering-lektion på CoddyKit. Dette er lektion 3 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 Vibe-programmering, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vibe-programmering-kurset indeholder 4 lektioner i alt.
Data, der bliver gemt
De fleste apps skal kunne huske ting: din todo-liste, dine gemte noter eller den mørke tilstand, du valgte. Uden lagring forsvinder alt, når du genindlæser siden.
Den gode nyhed er, at du kan gå fra »husker ingenting« til »husker alt« ved blot at beskrive, hvad der skal gemmes — AI håndterer lagringskoden.
Lagringsstigen
Der findes flere niveauer af lagring, fra det enkleste til det mest effektive. Start lavt, og gå kun op, når du har brug for det:
- I hukommelsen — hurtigt, men glemmes ved genindlæsning
- Lokal lagring — gemmes i brugerens browser og overlever genindlæsning
- En database — deles mellem enheder og brugere, den rigtige løsning
Hvis du fortæller AI, hvilket trin du ønsker, holder du din app så enkel som muligt.
Gem i browseren
Den nemmeste vedvarende lagring er localStorage — en lille notesbog, som browseren opbevarer for din app. Den er perfekt til indstillinger og små lister på én enhed.
Du behøver hverken en server eller en konto til dette. En prompt som den nedenfor tilføjer det med det samme.
Make my to-do list save to the browser's
localStorage so my tasks are still there after I
refresh the page. Load them automatically when the
page opens.Sådan fungerer localStorage
localStorage gemmer tekst under et navn (en »nøgle«). Hvis du vil gemme objekter eller lister, omdanner du dem først til JSON-tekst og omdanner dem derefter tilbage, når du læser dem.
Kør dette for at se det mønster, AI bruger: Gem en værdi, og læs den derefter tilbage.
const settings = { theme: 'dark', fontSize: 16 };
const saved = JSON.stringify(settings);
console.log('Saved text:', saved);
const loaded = JSON.parse(saved);
console.log('Theme is:', loaded.theme);Når localStorage ikke er nok
localStorage findes kun i én browser på én enhed. Hvis du vil have, at brugerne kan se deres data på både telefonen og den bærbare computer, eller hvis du vil dele data mellem brugere, har du brug for en database på en server.
Det lyder måske skræmmende, men værktøjer gør det nemt. Du beskriver, hvad der skal gemmes, og AI opsætter databasekaldende.
Nemmer databaser til vibe codere
Du behøver ikke køre din egen server. Hostede databaser giver dig lagring med næsten ingen opsætning:
- Supabase — en brugervenlig database med indbygget login, som fungerer godt sammen med AI-værktøjer
- Firebase — Googles database i realtid
- Airtable — et regneark, der fungerer som en database
Værktøjer som Bolt, Lovable og Replit kan forbinde dem for dig, når du beder om det.
Tilføj en database med en prompt
Hvis du vil tilføje rigtig lagring, skal du beskrive, hvad du gemmer, og hvor det skal gemmes. Hvis du nævner Supabase (et populært valg), fortæller du AI præcis, hvilken opsætning den skal generere.
Denne prompt omdanner en app, der kun gemmer lokalt, til en app med en delt, vedvarende database.
Connect this app to Supabase. Create a table called
notes with columns: id, title, content, and
created_at. Update the app so saving a note inserts
a row, and the homepage loads all notes from the
table, newest first.Tænk i tabeller
En database gemmer data i tabeller — som regneark med navngivne kolonner. En tabel med »noter« kan have en titel, et indhold og en dato. Hver gemte note er én række.
Du behøver ikke beherske databasedesign. Fortæl blot AI, hvilke felter hver ting har, så opbygger den tabellen for dig.
Opret, læs, opdater, slet
Næsten alle dataapps gør fire ting, som kaldes CRUD: De opretter nye elementer, læser dem, opdaterer dem og sletter dem. Hvis din app kan alle fire ting, er det et rigtigt værktøj.
Du kan bede AI om at tilføje dem én ad gangen og teste hver enkelt, før du går videre.
Add full editing to my notes app: I should be able
to create a note, edit an existing note's title and
content, and delete a note with a confirm dialog.
Keep everything saved to Supabase.Start enkelt, og opgrader senere
Det professionelle valg er at starte på det laveste trin, der virker. Bygger du en hurtig prototype? Brug localStorage. Skal den være tilgængelig på alle enheder? Gå videre til en database. AI kan endda migrere dig — »skift min app fra localStorage til Supabase«.
Lad være med at overkonstruere tidligt. Tilpas lagringen til det, din app faktisk har brug for i dag.
My app currently uses localStorage. Migrate it to
use Supabase instead so my data syncs across
devices, and move any existing local data into the
database on first load.Sikkerhedskopier og undgå datatab
Data er værdifulde — brugere bliver frustrerede, hvis de forsvinder. Hostede databaser som Supabase og Firebase opbevarer sikkerhedskopier for dig, hvilket er endnu en grund til at gå videre fra localStorage, når det handler om noget vigtigt.
Du kan også lade brugerne eksportere deres egne data som et sikkerhedsnet. Bed AI om at tilføje en sikkerhedskopi med ét klik, så ingen mister deres arbejde.
Add a "Download backup" button that exports all my
notes from the database as a JSON file, and an
"Import backup" option that restores them. This
way users never lose their data.Hurtigt tjek
Du har bygget en noteapp, der bruger browserens localStorage. En bruger klager over, at vedkommende ikke kan se sine noter, når appen åbnes på telefonen. Hvilken slags lagring har brugeren faktisk brug for?
Opsummering: Enkel lagring af data
Du har lært lagringsstigen: først lagring i hukommelsen, derefter localStorage til vedvarende lagring på én enhed og til sidst en rigtig database til data, der deles på tværs af enheder.
Du har set, hvordan du gemmer indstillinger i browseren, hvornår du skal opgradere til hostede databaser som Supabase, hvordan data bor i tabeller, og hvilke CRUD-handlinger alle dataapps har brug for. Start enkelt, og lad AI opgradere dig. Næste emne er at holde dine API-nøgler og hemmeligheder sikre.
Lær JavaScript 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
- 25
- Lektioner
- 100
Ofte stillede spørgsmål
Er lektionen “Enkel datalagring” gratis?
Ja — alle 3 lektioner i læringssporet Vibe-programmering, inklusive “Enkel datalagring”, 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. Vibe-programmering-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Enkel datalagring”?
Fra lokal lagring til en rigtig database. Du øver dig i Vibe-programmering 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å Vibe-programmering?
Der kræves ingen tidligere erfaring. Vibe-programmering 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 3 af 4.
Hvor lang tid tager lektionen “Enkel datalagring”?
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 Vibe-programmering-lektion?
Ja. Alle Vibe-programmering-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
- Kommunikation med API'er
- Læsning og lagring af filer
- Enkel datalagring
- Håndtering af hemmeligheder og nøgler