lagring med HTML5 Offline lagring Offline Informasjonsteknologi 2 Gløer Olav Langslet Sandvika VGS

Transkript

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

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

3 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

4 sdsd Offline lagring Informasjonsteknologi 2 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

5 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

6 sdsd Offline lagring Informasjonsteknologi 2 Hele koden for notisblokken vår: 6

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

8 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

9 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

10 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

11 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