Lokalt lagring i nettlesere

Lokalt lagring (og øktlagring)

• Websider har normalt ingen hukommelse.
• Brukerinndata på én side forsvinner når man går til en annen side.
• Noen ganger trenger man lagring, f.eks. i en nettbutikk-kurv.
• Påloggingswebsider krever lagring for å unngå gjentatt pålogging.
• Lagring skjer i enten cookies eller lokalt/økter lagring.

Lokalt lagring

• Tradisjonelt brukes cookies til lokal lagring. En tekstfil på brukerens PC som inneholder data til neste besøk.
• Cookies initieres normalt av serveren, men kan også opprettes i JavaScript på kundenes side.
• Et enklere alternativ er lokalt lagring, lagring inne i nettleseren.
• Hver domenen/nettside har tilgang til sin egen del av lokalt lagring i nettleseren.

API for lokalt lagring

• Lokalt lagring API er enkelt med disse funksjonene:
  • localStorage.setItem("navn", "verdi"); - Lagrer en verdi.
  • localStorage.getItem("navn"); - Henter en verdi.
  • localStorage.removeItem("navn"); - Fjerner en verdi.
  • localStorage.clear(); - Fjerner all lagring.
• Man kan lagre ca. 5-10 MB data per domene. Dette er mer enn cookies, som bare kan lagre 4KB.

Lagring av JSON

• For mye data er det felles å lagre data som JSON for lett gjenbruk senere.
• Konvertering fra objekt til JSON-tekst: var jsonTekst = JSON.stringify(obj);
• Konvertering fra JSON-tekst til objekt: var obj = JSON.parse(jsonTekst);

Øktlagring

• Øktlagring sletter data automatisk når nettleseren lukkes.
• Brukes for autentisering eller varer i en økt.
• Har samme API som lokalt lagring. Eksempler:
  • sessionStorage.setItem("navn", "verdi");
  • sessionStorage.getItem("navn");
  • sessionStorage.removeItem("navn");
  • sessionStorage.clear();

Indeksert DB

• Et alternativ til Lokalt lagring er Indeksert DB, en lokal database i nettleseren for data lagring.
• Bruker "objektslager" istedet for tabeller, hvor hver rad er et objekt.
• Kommunikasjon med databasen er asynkron, noe som krever hendelsehåndtering.
• Ikke i bruk i dette kurset.