Dagens webapplikasjoner håndtere store mengder data prosessering på klientsiden. De kan til og med må være i stand til å operere i frakoblet modus. Disse kravene ting går en lang vei mot å forklare hvorfor klientsiden datalagring er viktig for neste generasjons web-baserte applikasjoner.

Inntil nylig har imidlertid kapslene var ganske mye den eneste måten å lagre data i en brukers leseren. Hvis en Web-app nødvendig gjentas tilgang til noen bit av data, det er nødvendig for å sende denne informasjonen til serveren, og deretter gjøre gjentatte forespørsler til serveren, eller lagre disse dataene i informasjonskapsler.

Cookies tilbyr bare begrenset lagringsplass - maksimalt 4K eller 4096 bytes - så store mengder data måtte bli brutt inn cookie-størrelse biter og klarte eksplisitt og direkte

Dette er ikke en gjennomførbar tilnærming til lagring tildeling og forvaltning.. Selvfølgelig ble en ny tilnærming er nødvendig.

Det tar ikke mye for informasjonskapsler til Smuldre

Nettlesere var opprinnelig noe mer enn programmer for å legge dokumenter via HTTP og parsing HTML. Kort tid etter den første Netscape dukket opp, ble det imidlertid klart at mye mer var både mulig og nødvendig, men at noen mekanisme for å spore tilstand ved hjelp av iboende statsløse HTTP-protokollen ville være nødvendig. Lou Montulli dermed implementert cookie nettleser (også kjent som den "magiske cookie") i 1994, for versjon 0.9b av Mosiac Netscape.

Cookies, sammen med tilgang til server-side skript som Common Gateway Interface (CGI) forutsatt, aktiveres de tidligste webapplikasjoner. Til syvende og sist, startet dette oss ned en sti mot nettlesere transformerer til en universell applikasjonsplattform.

Akk, cookies er feil. Som nevnt, kan de lagre bare svært små mengder data, og de er sårbare for mange typer angrep, noe som begrenser deres nytte for lagring av personlige eller sensitive data.

Cookies reise fra nettleseren til serveren med hver HTTP-forespørsel. Si en webside inneholder fire bilder, en ekstern CSS-dokument og en Javascript-dokument. Sett en 4K informasjonskapsel på det domenet og nettleseren overføringer som cookie til serveren en gang for HTML-siden, en gang for hvert bilde, en gang for CSS-dokument og en gang for Javascript dokumentet.

Videre compounding problemet er observasjonen at dette teoretiske 4K cookie er overført fra nettleseren til serveren; de fleste brukere har asynkrone Internett-tilkoblinger, hvorpå opplastingshastighet er tregere enn nedlastingshastigheter. Uunngåelig, overføre data fra informasjonskapsler inne HTTP-hoder skaper unødvendig overhead.

På grunn av disse begrensningene, de fleste cookies er betydelig mindre enn 4K i størrelse. Google anbefaler at informasjonskapsler opptar ikke mer enn 400 byte (eller 200 tegn) for å maksimere ytelsen. De anbefaler også at statiske filer som bilder, CSS og Javascript kommer fra en distinkt domene med informasjonskapsler er deaktivert.

Med så mange negative knyttet til bruker cookies for lokal lagring, er det ikke rart at ulike konkurrerende forslag har dukket opp å få denne jobben gjort riktig. De siste månedene har to slike forslag har vært på en rask vei til W3C anbefaling status -. Som gjør nettleser støtte for lokal lagring godt og i ferd med å bli bedre

Det finnes fire hovedmetoder for å lagre store mengder klient siden av tre data i dag: Web SQL, IndexedDB, Web Storage og Application Cache. Avsnittene som følger undersøke hver metode individuelt og utforske grunnleggende aspekter av deres programmering og drift

Web SQL:. (? Men foreldet) Familiar Database Creation, er Execution

Web SQL et API for lagring data i en database og hente den ved hjelp av SQL. Inntil nylig, Safari, Chrome og Opera støttet Web SQL over konkurrerende IndexedDB standard. Men i 2010, SQLite var den eneste databasen som jobbet med Web SQL, og W3C sluttet å jobbe på denne spesifikasjonen, som siterer en mangel på implementasjoner som sin grunn.

Når det er sagt, virker Web SQL i en kul måte , så la oss se på noen eksempelkode.

Arbeide med Web SQL-databaser vil være kjent for alle som har jobbet med relasjonsdatabaser og SQL. Det første trinnet i å bruke en database, er å lage den og åpne den. Hvis du ikke ønsker å spesifikt opprette en database, kan du bare begynne å bruke en database, og API skaper det for deg

Her er noen kode for å lage en database.

Var db = openDatabase ( 'katter', '1.0'; Eksporter

'en katalog av mine katter', 2 * 1024 * 1024);

Venstre mot høyre, parametrene tatt av openDatabase er databasenavn , versjonsnummer, tekstbeskrivelse, og estimert database størrelse.

Når du har opprettet en database, kan du begynne å bruke den. Utføre SQL på en WebSQL database er like enkelt som å lage en transaksjon objekt og deretter kjøre det:

db.transaction (funksjon (tx) {

tx.executeSql ( 'CREATE TABLE katter (id unikt, navn) ');

tx.executeSql (' INSERT INTO katter (id, navn) VALUES (1, "Mr Jones".) ');

});

Selv om Safari, Chrome, Opera og Safari for mobil fortsatt støtte dette API, ikke noe nytt som har skjedd med Web SQL siden 2010, så det er lite sannsynlig å dukke opp som en standard for lokal lagring

Web Storage:. Fordeler av cookies uten bloat

Web Storage gir en enkel måte å lagre nøkkel /verdi-par i en brukers nettleser. Men dens likheter med cookies slutt der.

Web Storage er vedvarende. Når en verdi er lagret, vil det ikke forsvinne eller utløper før det er eksplisitt fjernet av programmet eller brukeren.

Web Storage kan håndtere store mengder data. Nåværende lesere begrense total størrelse per lagringsområde 5 MB.

Web Storage er ikke avhengig av serveren og sender ingen data til serveren. Du er fri til å lagre data lokalt og synkronisere den med serveren asynkront, selvfølgelig, men Web Storage fungerer like godt og er like nyttig pålogget som det er online

Web Storage gir fire primære metoder. - getItem (nøkkel); setItem (nøkkel, verdi); removeItem (nøkkel); og klart ()

Men ....: Web Storage Smutthullet kan misbrukes til å fylle harddisker med søppel data

Til slutt, Web Storage omfatter to ulike typer lagring: SessionStorage og Localstorage .

SessionStorage begrenser omfanget av data som er lagret i gjeldende nettleservinduet til nettopp det nettleservindu. Når den brukes med en e-handel program, for eksempel ved hjelp sessionStorage å skrive ned innholdet i en brukers handlekurven eliminerer muligheten for utilsiktede doble kjøp.

Localstorage, i mellomtiden, vedvarer over vinduer og faner innenfor en enkelt nettleser. Så, hvis du har samme nettsted åpen i tre vinduer i Chrome, alt kan alle dele den samme local container. Hvis du har tre forskjellige steder på forskjellige domener åpen, må hver og en sin egen container. Likeledes, hvis du har samme området åpent i ulike nettlesere, må hver sin nettleser egen container, siden de ikke deler en felles runtime sammenheng.

Hvis du vil angi en ny nøkkel-verdi-par deretter hente den, du kunne bruke følgende Javascript.

//først sette fornavn lik Sparky

localStorage.setItem ( "fornavn", "Sparky");

//neste, få verdien av firstname (hint, vil det være Sparky)

localStorage.getItem ( "fornavn");.

Web Storage API nådd W3C-anbefaling status sommeren 2013. fremover web Storage kan ganske mye brukes hvor som helst du ville normalt ha brukt cookies

Nyheter.: W3Cs web Storage Technology går live

Men web Storage er også i stand til mye mer. Hvis datasettene er ikke enorme, gir Web Storage hva som er kanskje den enkleste måten - enda enklere enn cookies - for å angi og hente nøkkel-verdi-par i en nettleser

IndexedDB: Søkbar, og uten fil. størrelses~~POS=TRUNC

indeksert database er en API for å lagre og hente data ved hjelp av en indeksert, transaksjonsdatabase nøkkelverdipar på brukerens datamaskin. IndexedDB gir raskere, mer sofistikert datalagring og gjenfinning enn enkel nøkkel-verdi-par lagring av typen tilgjengelig fra Web Storage eller informasjonskapsler.

IndexedDB API, som Web Storage, tok et stort skritt fremover i webstandarder prosess i sommer, å bli en W3C kandidat anbefaling i juli 2013.

IndexedDB tilbyr fire konkrete fordeler over Web Storage:.

indeksert data kan søkte effektivt

Databaser tillate flere verdier som skal lagres som en nøkkel, mens nøkkelverdi data krever hver tast for å være unike.

Transaksjons databaser tilby noen beskyttelse mot systemet og programfeil. Dersom en transaksjon ikke fullføre, kan det bli rullet tilbake.

IndexedDB databaser legger ingen størrelsesbegrensninger. I Firefox, vil nettleseren be om tillatelse til å utvide en database utover 50MB, men himmelen er grensen (faktisk, volumet eller disk stasjonens grensen) for lagring av data i IndexedDB.

Alle de store nettleserne bortsett fra Safari i dag støtte IndexedDB. Fordi Safari støtter Web SQL, men det er mulig å bruke en IndexedDB polyfill (kalt et mellomlegg) som implementerer funksjonene og syntaksen IndexedDB med Web SQL.

Det første trinnet i å bruke IndexedDB er å åpne en database.

Var forespørsel = indexedDB.open ( "mine");

Når du har opprettet databasen, kan du opprette et objekt butikken (som er noe veldig mye som en tabell) og legge data til det. Anta at vi har følgende data:

konst petData = [

{id: "00-01", firstname: "Butters", alder: 2, type: "hund"},

{id: "00-02", firstname: "Sammy", alder: 2, type: "hund"}

];

Vi kan da lage en data lagre og bruke den med følgende kode. Legg merke til onupgradeneeded behandleren. Dette er metoden for å ringe når du trenger å endre strukturen i databasen

request.onupgradeneeded = function (event) {

Var db = event.target. resultatet;

Var Object = db.createObjectStore ( "kunder", {nøkkelbane: "id"});

for (var i i customerData) {

Object. legge (customerData [i]);

}

}

Slik gjør du det: Forbedre applikasjonsytelse og redusere ventetid

IndexedDB utmerker seg ved å søke store data sett og kan fremskynde Web app ytelse ved å flytte strukturerte data til klientsiden der det er mulig. Det nærmer W3C-anbefaling status og kan brukes i alle nettlesere - om enn med noen forskjeller mellom implementeringer og, som nevnt, bare gjennom en polyfill i Safari

Application Cache. Making Offline Client-Side Storage Happen

Application Cache er ikke som andre klientsiden datalagrings APIer som er oppført her, men det er verdt å nevne, som det er en viktig komponent i slik offline klient-side web apps.

Application Cache bruker en cache manifest. Dette er en enkel tekstdokument notering ressurser som bør og ikke bør bufrede, for å fortelle nettleseren til å laste ned enkelte filer, holde på dem og bruke den bufrede versjonen i stedet gjøre en forespørsel til serveren. Hver store nettleser støtter Application Cache.

For å bruke Application Cache, lagre en tekstfil med filtypen .appcache i roten av nettstedet som inneholder filene du ønsker å cache. Avhengig av webserveren du bruker, kan det hende du må opprette en tilpasset MIME-type for .appcache filer for å sørge for at de er servert til nettleseren på riktig måte, og kan leses som søknad cache-filer.

Her er et eksempel på en cache manifestfilen:

cACHE MANIFEST

CACHE:

/css/styles.css

/js/javascript.css

/img/logo.gif

FALLBACK:

/img/weathertoday.png /img/weathernotavailable.png

NETWORK:

*

Og her er hva hver del gjør:

cache delen forteller leseren hvilke ressurser til cache for visning i frakoblet modus. Disse filene vil bli lagret inntil cache manifest endringer. Husk at kravet; det er viktig.

Den fallback delen forteller leseren hvilke filer som skal vises i stedet for et ikke-bufret ressurs. For eksempel, i den alternative avsnittet ovenfor, en grafikk som antagelig sier at de siste værmeldingene er ikke tilgjengelig i frakoblet modus vil vises hvis latestweather.png grafikk ikke kan lastes ned.

NETWORK delen forteller nettleser som ressursene er kun tilgjengelig i online-modus. En stjerne betyr at alt som ikke er bufret er en nettverksressurs

Related:. 9 Programmering Verktøy Tuned for Java

Mer: 17 Javascript Verktøy for HTML5 Generation

søknad Cache er et hendig verktøy med nesten ingen ulemper hvis den brukes riktig. Hvis du bare cache alt på nettstedet ditt, vil du (og dine besøkende) snart lure på hvorfor innholdet aldri endres. Hvis du cache bare ressurser som ikke endres ofte, eller er ivrig om å holde bufferen manifestere seg oppdatert og å slippe en ny versjon når du oppdaterer filer, så Application Cache vil gjøre din søknad arbeid offline samt være mye mer responsive i online-modus.

Lokal lagring leseren har gjennomgått en større oppgradering i de siste årene. Variasjonen og lignende navnene på de ulike gjennomførte APIer og anbefalinger har ført til ganske mye forvirring over hva som er greit å bruke nå kontra hva som bør stå alene. Poenget er at ulike måter å lagre data i nettleseren er tilgjengelig -. Og hver har sin egen plass

Dagene med utviklerne prøver å bruke informasjonskapsler for mer enn å sende svært enkel og svært lite navn-verdi parene til tjeneren, men er over. I dag er mye bedre alternativer er tilgjengelige.

Chris Minnick kjører en web-design og utviklingsselskap og regelmessig lærer HTML5 klasser for Ed2Go. Ed Tittel er en full-time frilans skribent og konsulent som spesialiserer seg på web-kodespråk, informasjonssikkerhet og Windows operativsystemer. Sammen Minnick og Tittel er forfatterne av den kommende boken Begynnelsen Programmering med HTML5 og CSS3 For Dummies, på grunn av den 3 september, samt en rekke andre bøker.