# localStorage JavaScript – spara data i webbläsaren

*Robert Roos*
*13 november 2026*

> Hur fungerar localStorage, vad skiljer det från sessionStorage och vilka gränser och säkerhetsregler gäller för JavaScript-utvecklare?

localStorage låter en webbsida spara data direkt i besökarens webbläsare. Informationen finns kvar även efter att sidan laddas om, webbläsaren stängs eller datorn startas om – till skillnad från vanliga JavaScript-variabler som försvinner så fort sidan laddas om. Det är en del av Web Storage API och är byggd för att lagra små mängder data på klientsidan utan att belasta servern med onödiga förfrågningar.

## Vad localStorage är

localStorage är ett lagringsutrymme som tillhör webbplatsens ursprung: domänen, protokollet och porten tillsammans. Data som sparats där finns kvar tills du eller användaren tar bort den. Varje ursprung har sitt eget utrymme, så en sida på exempelvis example.se kan inte läsa data som sparats av en annan webbplats.

localStorage sparar nyckel-värde-par där både nyckeln och värdet alltid är strängar. Lagringsutrymmet finns tillgängligt i webbläsaren via window.localStorage, men eftersom window är det globala objektet räcker det att skriva localStorage i koden.

## localStorage eller sessionStorage – skillnaden

Båda ingår i Web Storage API och fungerar nästan likadant, men livslängden skiljer dem åt:

- localStorage: data finns kvar permanent tills den rensas via JavaScript eller av användaren i webbläsarinställningarna. Den överlever att webbläsaren startas om och till och med att datorn startas om.
- sessionStorage: data finns kvar endast under flikens session. När fliken eller fönstret stängs rensas allt.

Välj localStorage när informationen ska finnas kvar nästa gång besökaren kommer till sajten, till exempel sparade inställningar eller ett utkast till ett formulär. Välj sessionStorage när datan bara ska finnas så länge besökaren är på just den sidan, till exempel ett tillfälligt val i en stegvis process.

## Så använder du localStorage

API:et är litet och består av några få metoder:

localStorage.setItem("nyckel", "värde") sparar ett värde under en nyckel.
localStorage.getItem("nyckel") hämtar värdet. Returnerar null om nyckeln inte finns.
localStorage.removeItem("nyckel") tar bort ett enskilt värde.
localStorage.clear() rensar allt som sparats för ursprunget.
localStorage.key(index) returnerar nyckeln på en viss plats i listan.
localStorage.length anger hur många värden som är sparade.

Exempel på att spara och hämta ett användarnamn:

localStorage.setItem("anvandarnamn", "Linnea");
const namn = localStorage.getItem("anvandarnamn");
console.log(namn); // Linnea

## Spara objekt och arrayer med JSON

Eftersom allt sparas som strängar räcker det inte att skicka in ett objekt direkt – då blir resultatet strängen "[object Object]" i stället för det du tänkte. Omvandla objekt och arrayer själv med JSON.stringify innan du sparar och JSON.parse när du hämtar dem:

const inställningar = { tema: "mörkt", textstorlek: 16 };
localStorage.setItem("inställningar", JSON.stringify(inställningar));
const sparade = JSON.parse(localStorage.getItem("inställningar"));

Kom ihåg att hantera fallet när getItem returnerar null, till exempel första gången besökaren kommer till sidan.

## Begränsningar du känner till

localStorage är inte lämpligt för stora datamängder. De flesta webbläsare tillåter ungefär fem megabyte per ursprung, och gränsen gäller sammanlagt för alla nycklar på webbplatsen. Försöker du spara mer kastar webbläsaren ett fel, så fånga upp det med try-catch om din kod skriver data.

API:et är synkront, vilket innebär att varje läsning och skrivning blockerar huvudtråden tills den är klar. För enstaka inställningar märks det inte, men upprepade skrivningar i en loop kan påverka prestandan.

Dessutom är localStorage bundet till samma ursprung. Data som sparats på https://example.se är inte tillgänglig från http://example.se eller från en annan domän.

## Säkerhet och vad du inte ska spara

localStorage är inte krypterat och inte avsett för känsliga information. Alla som har tillgång till datorn kan läsa det som är sparat, och alla skript som körs på samma ursprung kan komma åt datan. Spara därför inte lösenord, kreditkortsuppgifter, session-tokens eller personuppgifter i localStorage.

Var också uppmärksam på XSS-sårbarheter. Om en angripare får köra JavaScript på din sida kan den personen läsa och ändra allt i localStorage. Sanera alltid indata och undvik att köra osäker kod.

localStorage skickas inte automatiskt med HTTP-förfrågningar som cookies gör, så den är inte ett substitut för serverlagrad sessionshantering. Den är ett verktyg för klientlagring, inte en databas.

## Det som händer mellan flikar

När ett skript ändrar något i localStorage utlöses en storage-händelse i alla andra öppna flikar som hör till samma ursprung. Det går att lyssna på händelsen med window.addEventListener("storage", ...) och till exempel uppdatera gränssnittet i realtid när en annan flik ändrar ett sparade värde. Händelsen innehåller information om vilken nyckel som ändrades, det gamla och det nya värdet samt vilket område som stod bakom ändringen.

## Så inspekterar och rensar du

I webbläsarens utvecklarverktyg, under fliken Application (eller Lagring), kan du se allt som är sparat i localStorage för den aktuella webbplatsen. Där kan du redigera värden enskilt eller rensa hela utrymmet. Det är användbart både vid felsökning och när du vill se vad en webbplats faktiskt sparar om dig.

## Vanliga fel och hur du undviker dem

Ett vanligt fel är att anta att datan alltid finns där. Användaren kan rensa webbläsardata, surfa i privatläget eller stänga av lagring helt, då kan getItem returnera null eller ett skrivförsök misslyckas. Kontrollera alltid returvärdet och ha en reservlösning.

Ett annat fel är att spara data som egentligen tillhör servern. Om informationen behövs på flera enheter eller ska vara tillgänglig efter att användaren loggar in från en annan dator måste den sparas på servern, inte bara i webbläsaren.

Glöm inte att nycklar är skiftlägeskänsliga. "Anvandarnamn" och "användarnamn" är två olika nycklar, vilket lätt leder till dubbel lagring och förvirring.

## Checklista innan du använder localStorage

- Ska datan finnas kvar efter att webbläsaren stängs? Välj localStorage, annars sessionStorage.
- Är informationen känslig? Spara den inte i localStorage.
- Är datan större än några hundra kilobyte? Överväg en annan lösning.
- Ska du spara objekt eller arrayer? Använd JSON.stringify och JSON.parse.
- Hanterar du fallet när lagringen är full eller avstängd? Använd try-catch och kontrollera null.

Detta är grunderna i localStorage: ett enkelt sätt att spara strängdata i webbläsaren som överlever sidladdningar och omstarter, med tydliga gränser som är bra att känna till innan du börjar koda.