Transcript Offline lagring Når du må lagre data lokalt på datamaskinen eller i

Offline
lagring med
HTML5
Gløer Olav Langslet
Sandvika VGS
Leksjon 8
Informasjonsteknologi 2
Offline lagring
I IT1 brukte vi databaser til å lagre data. Der
kunne vi bygge tabeller og fylle dem med innhold
om filmer, biblioteker osv. Men hva om vi ikke er
på nett, men jobber med en nettside. Kanskje vi
spiller et spill på toget, og vi ikke er på nett, eller
vi kan ha lagt noen varer i en handlekurv uten å
være logget inn.
I disse og mange andre tilfeller, vil det være en
fordel at vi kan lagre data lokalt på vår egen
datamaskin.
sdsd
Offline lagring
Informasjonsteknologi 2
Offline lagring med HTML5
Det er primært 2 måter du kan lagre data
på med HTML5, når du er offline :
1. offline storage
2. application caching
Offline storage, eller offline lagring, lagrer
data som som regel er generert av
brukeren.
Application caching lagrer ”tilstanden” til
nettsiden.
I dag skal vi se på offline storage, altså
hvordan vi kan lagre data uten å ha en
database tilgjengelig. Husk på at det ikke
er noe spørsmål om enten eller. De fleste
nettsider har både en database knyttet til
seg, samtidig som den lagrer data lokalt
på brukerens datamaskin.
Det du lagrer om en bruker vil være
knyttet til nettsiden din, eller nettstedet
du bruker. Hvis jag har en nettside på
langslet.com, vil det kun være mulig å få
2
tak i data som er laget på dette
domenet. Sånn sett kan det hende vi
får litt trøbbel hvis vi legger ut filene
på en felles-server som er knyttet til en
skole, et fylke eller lignende.
HTML5 gir deg mange forskjellige
måter for å lagre data lokalt. Du har
enkel localStorage, men du har også
fillagring og lokal SQL-lagring.
Det er hva du har tenkt å lagre som bør
avgjøre hva slags teknikk du velger å
bruke.
Offline lagring
Informasjonsteknologi 2
sessionStorage og localStorage
sessionStorage lar deg lagre data som ”lever” så lenge du har nettleseren oppe. Når
du lukker den mister du dataene.
localStorage lar deg lagre data som ligger der helt til en bruker velger å fjerne dem,
eller nettsiden din selv gjør det. For eksempel med en ”Tøm handlekurv”-knapp.
Du kan lagre mye data, 5Mb i FireFox, Chrome, Safari og Opera, og hele 10 Mb i IE9.
localStorage har 5 metoder
setItem (key, value)
getItem (key)
removeItem (key)
clear()
length()
Setter en verdi til en variable med en “nøkkel”,
eller et navn, f.eks.
setItem (“fornavn”, “Sokrates”);
Henter ut verdien, f.eks.
getItem (“fornavn”);
Fjerner variabelen, f.eks:
removeItem (“fornavn”);
Fjerner alle key/value-par (alle variabler)
Antall variabler du har lagret.
Vi gjør et praktisk eksempel
3
sdsd
Offline lagring
Vi lager en notisblokk
La oss forsøke å lage en liten notisblokk.
Starter med litt enkel html:
Vi kan legge på litt css for syns skyld:
4
Informasjonsteknologi 2
Offline lagring
Informasjonsteknologi 2
Vi forsøker oss med litt JavaScript
Først deklarerer vi en variabel for diven hvor notatet skal ligge.
Husk på at dataene du lagrer gjelder for hele domenet. Du kan derfor lage en ny side, og
fiske ut teksten i notatblokken din:
Skriver kode i en annen html-fil:
Dette er bra, og selvfølgelig det vi ønsker, men vi må være litt obs på at vi ikke bruker
samme navn på variabler på forskjellige sider, siden de da kan ødelegge for hverandre.
Det er også dette som kan skape problemer hvis du deler webserver med andre.
5
sdsd
Offline lagring
Hele koden for notisblokken vår:
6
Informasjonsteknologi 2
Offline lagring
Informasjonsteknologi 2
Kan vi lagre et array?
Vi kan også lagre såkalte datastrukturer, som for eksempel et array. Dette kan være
nyttig hvis dere skal lage for eksempel en handleliste eller lignende.
Litt html:
JSON
Det som kan skape problemer for oss, er at et localStorage på et vis bare lagrer tekst i
variablene. Hvis vi prøver å lagre arrayet, og henter det ut får vi et merkelig resultat.
Heldigvis har vi noe som heter JSON (JavaScript Object Notation), som hjelper oss å
”oversette” teksten så vi skjønner at den er et objekt. I dette tilfellet et array.
Så når vi skal overføre vårt array til localStorage, må vi bruke JSON til å omforme det
først. Stringify gjør om arrayet til en String på et bestemt format.
Og når vi skal hente det ut, gjør vi motsatt. Da omformer vi teksten til et array:
For å se det hele ”live”, kan du gå inn på denne spenstige siden:
http://langslet.com/vgs/kode/leksjon_8/handleListeLokal.html
7
sdsd
Offline lagring
Informasjonsteknologi 2
Kode
Vi starter opp med å deklarerer 4 variabler:
1. btn – knappen for å legge til en ny vare
2. handlelisten – selve listen hvor varene dukker opp
3. varer – et array til å lagre varene
4. varenavn – input-felt for å skrive inn en ny vare
Vi lager oss en onload-funksjon og tilordner variablene. Når vi klikker på knappen skal
vi legge til en vare.
Så kommer trikset. Hvis vi allerede har lagret varer fra før av, skal disse nå legges inn
som varer. Hvis ikke oppretter vi et tomt array.
8
Offline lagring
Informasjonsteknologi 2
Koden til nå
Hvis det er lagret noe, skal vi også vise frem varene i arrayet. Det legger vi i en egen
funksjon.
For hver vare legger vi inn teksten som er lagret i arrayet. Da mangler vi bare å legge til
varer:
Vi legger en ny vare inn i arrayet. Samtidig oppdaterer vi den lokalt lagrede varelisten,
localStorage.varer. Og vips, så var vi ferdig.
9
sdsd
Offline lagring
Informasjonsteknologi 2
Koden til nå
Men hva skjer hvis du står på Rimi, og kommer til å prøve å oppdatere siden din? Da
forsøker nettleseren å hente den inn på nytt, og hvis du ikke er online, vil det se slik ut:
Da hjelper det ikke med handleliste. Vi må finne en måte å gjøre siden vår tilgjengelig
offline.
cache.manifest
Vi kan lage oss en fil, som sier noe om hvilke filer som skal være tilgjengelige offline. En
slik fil kaller vi cache.manifest. Denne kan dere lage i notepad eller lignende.
I filene skriver dere for eksempel (ikke skriv tallene, det er linjenummer):
Da forteller jeg nettleseren at handleListeLokal skal være tilgjengelig offline.
I html-koden må jeg legge til følgende:
Nå er siden tilgjengelig, og dere kan trygt stikke på Rimi for å handle inn til dagens
middag. Så filene heter altså cache.manifest
Pass på at dere ikke lagrer den som cache.manifest.txt eller noe sånt. Filen er lagret i
samme mappe som handleListeLokal.html.
10
Offline lagring
Informasjonsteknologi 2
Andre filer
Husk på at det nå kun er html-filen som er tilgjengelig offline. Hvis jeg har bilder, css
eller lignende må disse også gjøres tilgjengelige.
Filen min kan for eksempel se slik ut:
Du kan også si noe om hvilke tjenester som krever at du er online, eller hvilken fil som
skal vises i stedet for en fil som krever tilgang til serveren. En php-fil vil som oftest
kreve at du er online, så da kan du evt. vise frem en html-versjon i stedet.
#Fungerer som kommentar i manifest-filen.
Å gjøre nettsiden tilgjengelig offline, er især viktig når du lager webapps, som for
eksempel handlelisten.
11