no.hideout-lastation.com
Paradis For Designere Og Utviklere


Slik bruker du HTML5 frakoblet lagring på nettstedet ditt

Bortsett fra nye elementer i HTML5, tilbyr denne nye webteknologien oss Offline Storage . Det finnes en rekke typer offline lagring, og i denne artikkelen vil vi spesielt diskutere sessionStorage og localStorage. Frakoblet lagring tillater oss å lagre data i brukerens nettleser og gjør at våre webapps eller spill fungerer uten en tilkobling (for en periode).

I et ekte verdenseksempel kan utviklere dra nytte av Offline Storage som sikkerhetskopiering hvis Internett-tilkobling ikke er tilgjengelig. De kan da sende dataene til den elektroniske serveren når de gjenoppretter tilkobling.

Hvis du spør deg selv hvordan du bruker denne nettleserens funksjon til nettstedet ditt, kan du sjekke ut denne artikkelen.

sessionStorage

sessionStorage er en form for lagring som lagrer data midlertidig i nettleseren. Dataene i sessionStorage er satt i nøkkel- og verdiparing, og det er eksklusivt i nettleservinduet eller -fanen. Så lenge nettleseren eller fanen fortsatt er åpen, vil dataene fortsatt være der, med mindre vi sletter det med vilje, eller vi avslutter nettleseren .

For å lagre en data i sessionStorage, kan vi bruke .setItem() . Her er et eksempel hvor vi lagrer "Hello World".

 sessionStorage.setItem ("keyExample", "Hello World"); 

Alternativt kan vi også gjøre følgende. Dette vil opprette en dataoppføring med en anotherKeyName som nøkkel og 'Hei for' som verdien.

 sessionStorage.anotherKeyExample = "Hei for"; 

I webkitbaserte nettlesere som Safari, Chrome og Opera kan du se dataene under Ressurser- fanen. I Firefox kan du søke på dataene som ligger under Firebug DOM-fanen.

Det er verdt å merke seg at sessionStorage bare kan lagre en streng eller ren tekst. Et integer vil bli oversatt til streng.

Hvis du har JSON data, må du formatere den til streng ved hjelp av JSON.stringify() og hente den ved hjelp av JSON.parse() å konvertere strengen tilbake som JSON. Nedenfor er noen eksempler på kode:

 var json = JSON.stringify ({[1, 2, 3]}); sessionStorage.anotherKeyExample = json; 

Henter data i sesssionStorage

Vi har også to måter å hente dataene fra sessionStorage. Først kan vi bruke .getItem() eller ved å direkte peke på nøkkelnavnet, som følger.

 var a = sessionStorage.getItem ("keyExample"); var b = sessionStorage.anotherKeyExample; 

Slette data i sessionStorage

Som nevnt ovenfor blir dataene i sessionStorage slettet når brukeren lukker nettleservinduet eller -fanen. Men vi kan også slette det med vilje. Vi kan bruke .removeItem() -metoden eller delete direktivet, slik som det.

 sessionStorage.removeItem ( "keyExample"); slett sessionStorage.anotherKeyExample; 

lokal lagring

Vi kan også lagre data i nettleseren i en form for localStorage . Men i motsetning til sessionStorage, er lokalStorage data vedvarende; Dataene forblir i nettleseren så lenge vi ikke forsettlig fjerner den.

Lagring av dataene i localStorage er like enkelt som vi gjorde i sessionStorage. Faktisk er de tekniske egenskapene det samme, bortsett fra at vi nå bruker localStorage objekt. Vi kan skrive inn en dataregistrering, med metoden .setItem() eller direkte innstille den med nøkkelnavnet, slik som det.

 localStorage.setItem ("keyName", "Hello, Local Storage"); localStorage.anotherKeyName = 1; 

Vi henter dataene med .getItem() -metoden.

 var c = localStorage.getItem ("keyName"); var d = localStorage.anotherKeyName 

På samme måte kan vi fjerne datainngang fra localStroge med .removeItem() -metoden og delete direktivet.

Frakoblet lagringsgrenseformat

Både sessionStorage og localStorage har grenser når det gjelder maksimal kapasitet, og hver nettleser har sin egen grense. Firefox, Chrome og Opera grense er 5 MB per domene. Internet Explorer gir mer plass med 10 MB per domene. Så sørg for at dataene dine ikke overskrider grensen. Hvis dataene overskrider grensen, vil du kanskje vurdere det andre alternativet, for eksempel SQLite .

Funksjonsgjenkjenning

I tillegg, selv om den støtten til sessionStorage og localStorage er ganske stor (IE8 støtter dem), kan du likevel kjøre leserfunksjonssensing før du kjører en funksjon som legger inn en oppføring i sessionStorage eller localStorage. Dette er slik at du kan legge til en tilbakestillingsfunksjon som med informasjonskapsler hvis nettleseren ikke støtter Offline Storage form.

Du kan bruke Modernizr for å gjøre det, eller pakke inn skriptet ditt med denne betingede utsagnet, slik som det.

 hvis (window.localStorage) {} else {alert ('localStorage er ikke tilgjengelig'); } 

Konklusjon

Frakoblet lagring er en veldig flott funksjon som gjør det mulig for webapps og spill å jobbe offline. Tidligere har vi også vist deg hvordan du kan bruke den i ekte eksempler.

Jeg håper at denne korte artikkelen kan hjelpe deg med å komme i gang med Offline Storage.

14 YouTube-kanaler for de beste fotograferingsveiledningene

14 YouTube-kanaler for de beste fotograferingsveiledningene

Læring fotografering tar tid, og det er enda mer behagelig hvis du kan plukke den opp i ditt eget tempo. Det er i slike situasjoner at YouTube kommer til nytte.Det er mange kanaler der ute som er dedikert til dette emnet, og mange som imøtekommer de som er nye i håndverket, ved å bryte ned de mange aspektene av fotografering i små, lettfordelte videosegmenter.Her

(Tekniske og design tips)

Wicked CSS - Et varmt nytt animasjonsbibliotek i ren CSS3

Wicked CSS - Et varmt nytt animasjonsbibliotek i ren CSS3

Takket være CSS3 kan du bygge noen gale animasjoner på nettet. Disse kan fungere over alle nettlesere og sideelementer for å kontrollere navigasjonselementer, rullegardiner, faner, du nevner det.Faktisk kan du selv generere disse kodene dynamisk ved hjelp av animasjonsverktøy. Men de er ganske begrenset i forhold til et fullverdig animasjonsbibliotek.Wic

(Tekniske og design tips)