JavaScript — Introduktion genom exempel

7.1 Cookie och localStorage

För att spara data mellan olika sessioner finns två tekniker som illustreras i detta exempel. Vid ett besök på webbsidan sparas data, som sedan kan läsas in igen vid nästa besök, för att återställa variablerna.

1. Data sparas i en cookie.
2. Data sparas i localStorage.

Sammanfattning

• Cookies
  • Med document.cookie kommer man åt de cookies som är tillgängliga för den webbsida som visas i webbläsaren.
  • Textsträngen för tillgängliga cookies kan innehålla flera cookies som åtkiljs av semikolon.
  • En cookie består av ett antal namn/värde-par på formen namn=värde, som åtskiljs av semikolon. T.ex. kan en cookie vara "kakan=23&45;expires=Thu, 03 Aug 2023 19:25:37 GMT;".
    • Utöver detta finns ytterligare några namn/värde-par för domain, path och secure. Dessa sätts dock automatiskt av webbläsaren, så när man sparar en cookie räcker det att ange namn, värde och upphörandedatum.
    • Det första namnet är det namn som man väljer att ge sin cookie och därefter följer det värde som ska sparas. Detta är en textsträng, som man sätter samman i programmet. Vill man spara flera värden får man slå samman dem till en textsträng och lägga in ett skiljetecken mellan dem.
    • Kan värdet innehålla semikolon, komma eller "white space", måste man koda det med hjälp av encodeURIComponent(). Då man sedan läser in cookien, avkodar man värdet med decodeURIComponent().
    • Anger man inget upphörandedatum, tas cookien bort, då webbläsaren stängs.
  • I en cookie kan värdet vara upp till 4KB.
• localStorage
  • I localStorage sparar man data i variabler med localStorage.setItem("namn", värde) och avläser med localStorage.getItem("namn").
    • Det "namn" man anger är det namn som man väljer för variabeln.
    • Försöker man läsa en variabel som inte finns, returnerar getItem() värdet null.
    • Värdet är en textsträng, men här behöver man inte koda den.
  • I localStorage kan värdet vara upp till 5MB.
  • En variabel i localStorage har inget upphörandedatum.

Egna övningar

Det finns inga övningar på detta område. Studera istället den kod som finns i exemplen och experimentera med den. Ta bl.a. fram konsolen och kontrollera att det sparas en cookie eller variabel i localStorage, då du testkör programmen.