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
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 stegvis utöka vår app med mer funktionalitet. Vi börjar med att cache:a undan data.
Den största anledningen för att använda sig av ett cache i vår trafikmeddelande-app är för att dra ner på hur ofta vi anropar SR:s webbtjänst. Då belastar vi inte dem alltför mycket. En annan bra anledning är att vi minskar hur mycket data vår app tar emot/skickar. Kör vi appen på en mobilplattform är chansen stor att vi vinner lite extra batteritid genom detta.
Spara undan data
Att spara undan vår data kan vi lätt göra genom att konvertera trafikMeddelande till en textsträng. Detta gör vi enklast genom att använda JSON.stringify(). Det skulle kunna se ut så här:
var sparbar = JSON.stringify(trafikMeddelanden);
Nu har vi data som är lämplig att skriva ned i localStorage. Så vi sparar vår data under en nyckel genom att göra följande:
localStorage.setItem("trafikMeddelanden", sparbar)
Ovanstående gör att vi nu har vår data sparad i användarens webbklient. Men ska vi göra en bra cache måste vi även hålla reda på hur länge meddelandena varit lagrade. Annars vet vi inte när det är dags för en ny inläsning. För att göra detta ska vi skapa ett till nyckel/värde-par i localStorage. Vi kan helt enkelt ta och spara nuvarande tid. Vilket vi kan göra så här:
var tid = new Date();
localStorage.setItem("senast", JSON.stringify(tid));
Om man kör Date utan någon inparameter så kommer det att skapas ett datumobjekt som är satt till nuvrande tidpunkt.
Läsa ut data
När vi startar vår app vill vi först kolla om den data som finns i vår localStorage är färsk eller om vi ska hämta ny data. Det kan vi göra genom att läsa ut nyckeln senaste som vi skapade tidigare.
var senast = JSON.parse(localStorage.getItem("senast"));
Här kan det hända ett par saker. I det första fallet så finns inte nyckeln och vi får null som värde. I det andra fallet får vi en specifik tidsangivelse som vi kan använda oss av. Vi skulle kunna göra något sånt här:
if(senast == null) {
// Sätt till jättelängesen
senast = new Date(0);
} else {
senast = new Date(senast);
}
Att sätta new Date(0) är det samma som att ange 1970-01-01 som tidpunkt.
Nästa aktivitet
[[]]