localStorage; lokaldata med HTML/Javascript

localStorage kan användas för att lagra vissa data lokalt på din PC/mobil/platta… Datat lagras endast som textsträngar; andra typer av data ex numeriska värden måste ”strängifieras” (finns flera färdiga funktioner för det).

Stödet är faktiskt närmast komplett så här år 2015, har varit så i stort sett sedan 2010:
localStorageSupport

För att hantera ett localStorage behövs i grunden endast några få funktioner:

  • Spara data: localStorage.setItem(’dataName’, ’thevalue’);
  • Hämta datat: localStorage.getItem(’dataName’);
  • Ta bort datat: localStorage.removeItem(’dataName’);
  • Rensa hela ”lagret” av data: localStorage.clear();

Något som kan vara en nackdel är att hanteringen av localStorage sker synkront, dvs ej parallellt med exempelvis skärmuppdateringar. Det omnämns flera ramverk på Internet som möjliggör asynkron access men det verkar resultera i en mer komplex kod. Speciellt synd då localStorage i grunden är uttänkt att vara oerhört lättanvänt.

Ett småskaligt exempel på att använda localStorage är en shoppinglista där du kan dra inköpsobjekten till ”inhandlingsordningen”. Även ha flera listor, en för varje affär. I localStorage lagras all data som enkla textsträngar så man måste ibland vara lite ”trixig” i beskrivningen av datat. Ex:

localStorage.setItem(’Willys@grönsak’, ’Paprika’);

Alternativt kan data ursprungligen vara lagrat i en annan form än en sträng, ex XML:

Detta kan då ”strängifieras” till ”shop@willys@vegetable@paprika”. Det finns flera ramverk, t.ex. JSON som kan hjälpa till med strängifieringen ifall det verkar vara alltför mycket jobb att själva koda en lösning. JSON är lite för stort för att ta upp i detalj här. Enkelt uttryckt är det ett sätt att i Javascript beskriva ett objekt, precis som jag ovan gjorde med XML.

I JSON kan det se ut så här:

Därefter måste utvecklaren tänka på hur ovan strängs data ska passa med ex
localStorage.setItem(’dataName’, ’thevalue’);… En viss egen stränghantering är uppenbar för att kunna få exempelvis ”kind” att hamna i ”thevalue” :-) .

Det är länge sedan jag sysslade med HTML/Javascript o dyl, localStorage och JSON är helt nytt för mig. Min arbetsgivare (under perioden 2001-2005) tillät inget annat än ”standardlösningar” där det aldrig fick gå fel i en någon webbläsare (Mozilla, IE6, Opera). Endast basal HTML4, CSS1 och Javascript/ECMASCRIPT 3 tilläts.

localStorage existerade ännu inte vid den punkten, medans JSON visserligen fanns men det var inget som tilläts på min arbetsplats; inga externa ramverk e dyl fick användas.

Be First to Comment

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *