En SPA med localStorage - Versionshistorik

PGJ: /* Lägga till cache */

2016-02-26T14:02:10Z

Lägga till cache

@@ Rad 31: / Rad 31: @@
 == Lägga till cache ==
-Vi ska nu stegvis utöka vår app med mer funktionalitet. Vi börjar med att lagra undan datat.
+Vi ska nu stegvis utöka vår app med mer funktionalitet. Vi börjar med att cache:a undan data.
 <codepen pen="vLPwRx" tab="js" height="1200">
 </codepen>

PGJ: /* Cache */

2016-02-26T13:04:03Z

Cache

← Äldre version		Versionen från 26 februari 2016 kl. 13.04
Rad 29:		Rad 29:

	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.		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.

	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.

	== Lägga till cache ==		== Lägga till cache ==

PGJ: /* Cache */

2016-02-26T13:03:36Z

Cache

← Äldre version		Versionen från 26 februari 2016 kl. 13.03
Rad 29:		Rad 29:

	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.		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.

			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.

	== Lägga till cache ==		== Lägga till cache ==

PGJ: /* Lägga till cache */

2016-02-26T13:01:12Z

Lägga till cache

← Äldre version		Versionen från 26 februari 2016 kl. 13.01
Rad 31:		Rad 31:

	== Lägga till cache ==		== 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.		Vi ska nu stegvis utöka vår app med mer funktionalitet. Vi börjar med att lagra undan datat.
	<codepen pen="vLPwRx" tab="js" height="1200">		<codepen pen="vLPwRx" tab="js" height="1200">
	</codepen>		</codepen>

PGJ: /* Lägga till cache */

2016-02-26T11:06:39Z

Lägga till cache

← Äldre version		Versionen från 26 februari 2016 kl. 11.06
Rad 32:		Rad 32:
	== Lägga till cache ==		== 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.		Vi ska nu lägga till funktionalitet till vår app i några steg. Vi börjar med att lagra undan datat.

	<codepen pen="vLPwRx" tab="js" height="1200">		<codepen pen="vLPwRx" tab="js" height="1200">
	</codepen>		</codepen>

PGJ: /* Grundkoden */

2016-02-26T11:06:15Z

Grundkoden

← Äldre version		Versionen från 26 februari 2016 kl. 11.06
Rad 19:		Rad 19:
	<code>trafikMeddelanden</code> ä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 <code>title</code> och <code>description</code>. Det nya objektet pushar vi direkt in i <code>trafikMeddelanden</code>.		<code>trafikMeddelanden</code> ä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 <code>title</code> och <code>description</code>. Det nya objektet pushar vi direkt in i <code>trafikMeddelanden</code>.

	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.		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 ==

PGJ: /* Grundkoden */

2016-02-26T11:05:17Z

Grundkoden

← Äldre version		Versionen från 26 februari 2016 kl. 11.05
Rad 11:		Rad 11:

	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">
	trafikMeddelanden.push(		trafikMeddelanden.push(
	{ title: m.title,		{ title: m.title,
	description: m.description }		description: m.description }
	);		);
	</syntaxhighlight>		</syntaxhighlight>

PGJ: /* Grundkoden */

2016-02-26T11:04:49Z

Grundkoden

← Äldre version		Versionen från 26 februari 2016 kl. 11.04
Rad 6:		Rad 6:
	</codepen>		</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]]"~~, då detta~~ bara är en variant av den koden.		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 ~~plockar~~ ut ~~den del~~ av den inlästa datan som vi vill spara. Vi lägger ~~denna~~ 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:		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:

	<syntaxhighlight lang="JavaScript">		<syntaxhighlight lang="JavaScript">

PGJ den 26 februari 2016 kl. 11.03

2016-02-26T11:03:03Z

← Äldre version		Versionen från 26 februari 2016 kl. 11.03
Rad 1:		Rad 1:
	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.		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 ==		== Grundkoden ==
	Vi ~~ska utgå~~ ifrån en något förändrad version av vår app. Den kommer att se ut som följer		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

	<codepen pen="ONLGdB" tab="js" height="1200">		<codepen pen="ONLGdB" tab="js" height="1200">

PGJ: /* Grundkoden */

2016-02-26T11:02:38Z

Grundkoden

@@ Rad 2: / Rad 2: @@
 == Grundkoden ==
 Vi ska utgå ifrån en något förändrad version av vår app. Den kommer att se ut som följer
-=== HTML ===
 <codepen pen="vLPwRx" tab="js" height="1200">
 </codepen>