En SPA med localStorage

Vi ska ta och modifiera en tidigare SPA, så att den använder sig av localStorage. Vi utgår ifrån vår app som läste trafikmeddelanden ifrån Sveriges Radio. Men istället för att visa upp saker på en karta, så förenklar vi lite och visar bara upp en meddelandena som text.

Grundkoden

Vi utgår ifrån en något förändrad version av vår tidigare app. Den kommer att se ut som följer

See the Pen ONLGdB by Patrik Grip-Jansson (@PGJ) on CodePen.

I ovanstående version så läser vi alltid in datan ifrån SR och visar upp denna. Vi går inte in i detalj angående hur vi hämtar data. Det kan du läsa mer om under "Ännu en SPA med Leaflet". Detta bara är en variant av den koden.

Det enda nya är att vi väljer ut vilka delar av den inlästa datan som vi vill spara. Vi lägger dessa i en egen array. Detta är mest till för att undvika att spara alltför mycket data på klientsidan. Koden för detta ser ut så här:

        trafikMeddelanden.push(
          { title: m.title,
            description: m.description }
          );

trafikMeddelanden är en array som vi skapat i början av vår kod. Den är helt tom ifrån början. För varje inläst trafikmeddelande, så skapar vi ett nytt JavaScript-objekt som enbart innehåller title och description. Det nya objektet pushar vi direkt in i trafikMeddelanden.

Man vill ofta göra något liknande när man läser in extern data. Det är sällan vi behöver precis all information som en datakälla förser oss med och ska vi jobba med informationen kan det förstås vara en fördel att enbart använda det vi verkligen behöver. I vissa fall kan vi tala om för datakällan exakt vilken information vi vill ha och på så vis slippa att överföra överflödig data. Finns den möjligheten ska man förstås utnyttja den. När vi skapar egna serverapplikationer som ska tjäna som datakällor, ska vi försöka att vara så sparsamma som möjligt när vi skickar utdata och enbart skicka det som verkligen är relevant.

Cache

Cache är ett tillfälle där vi har ett rätt så bra svenskt ord, dvs mellanlagring. Men i IT-världen gillar vi svengelska och det är mycket större chans att IT-nördar förstår vad du menar om du säger cache istället för mellanlagring.

Den svengelska benämningen cache handlar om en typ av mellanlagring. Ofta är det som så att vi sparar undan kopior av saker så att vi kan nå dem snabbare. I vår dator finns t.ex. cacheminne som är supersnabbt och varje gång datorn läser något från det "vanliga" minnet sparas en kopia i cacheminnet. Behöver datorn komma åt samma data en gång till, så finns den tillgänglig i det snabbare cacheminnet. På samma sätt mellanlagras webbsidor på din dator. De hämtas först ifrån en extern server och lagras i webbläsarens cacheutrymme på disken. När du ska tillbaka till samma sida kommer webbläsaren att kolla om sidan är uppdaterad, om den inte är det så använder den kopian som finns i cachen.

Lägga till cache

Vi ska nu lägga till funktionalitet till vår app i några steg. Vi börjar med att lagra undan datat.

See the Pen vLPwRx by Patrik Grip-Jansson (@PGJ) on CodePen.

Nästa aktivitet

[[]]