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.

Karriere Dilemma: 5 Trenger å vurdere før jeg sier at jeg slutter!

Det pleide å være tilfelle at en jobb er noe som arbeidere utveksler sitt arbeid i retur for penger som vil sette mat i munnen. I nåtiden skjønner flere og flere mennesker utover oppfyllelsen av deres økonomiske behov for å tilfredsstille andre viktige aspekter av deres liv, som helse, vennskap og prestasjon.Sannh

(Tekniske og design tips)

Philter.js - Gratis Image Alteration Library ved hjelp av CSS-filtre

Instagram er allment kjent som det mest populære foto-nettverket. Det håndterer over 52 millioner bilder per dag, og mange av dem inkluderer filtre som endrer bilder på fluen.Dette er også mulig ved bruk av CSS-filtre som gjelder direkte i nettleseren . Disse egendefinerte filteregenskapene har bred støtte på tvers av mange nettlesere, og de ser bra ut.Med P

(Tekniske og design tips)