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.

Cloud Storage Face-off: iCloud vs Google Drive vs OneDrive vs Dropbox

Cloud storage-tjenester har blitt ganske praktiske i nyere tid. Muligheten til å lagre filene dine i skyen og hente dem hvor som helst og når som helst gir brukerne en grad av fleksibilitet som ble ansett som umulig for mange år siden.For de som ikke er helt sikker på hvilken skylagring som passer for dem, vil jeg bryte ned de gratis tilbudene fra de store fire sky-lagringstjenestene:Google Disk,Microsoft OneDrive,Dropbox og,Apple iCloud Drive .Ute

(Tekniske og design tips)

5 ganger Internett-tastaturkrigere lagret ikke dagen

Det har vært flere ganger når Internett-fellesskap har bandet sammen for å gjøre utrolige mengder gode. Bare ta en titt på disse "Internet Acts" for noen få eksempler.Det er jevne tider når de prøver å bekjempe urettferdigheter og forbrytelser som skjer utenfor den virtuelle plassen, i den virkelige verden. Interne

(Tekniske og design tips)