Lokalno shranjevanje. Uporaba localStorage za JavaScript potrebuje lokalno shranjevanje piškotkov

Piškotki, ki smo jih analizirali v prejšnji lekciji, so zelo omejeni: en piškotek ima lahko le 4096 znakov, število piškotkov na domeno pa je lahko približno 30-50, odvisno od brskalnika. Zato, žal, tam ne bo mogoče shraniti veliko informacij. Tako se je zgodilo zgodovinsko.

Da bi se izognili tej omejitvi, se je v brskalnikih pojavila alternativa piškotkom – imenuje se lokalna shramba. V lokalni shrambi lahko dalj časa shranjujemo 5-10 megabajtov informacij ali celo več.

Delo z lokalno shrambo

Objekt localStorage, vgrajen v brskalnik, je namenjen delu z lokalnim pomnilnikom. Ima 4 enostavno razumljive metode. Tukaj so:

// Shrani vrednost: localStorage.setItem ("Key", "Value"); // Pridobite vrednost: var value = localStorage.getItem ("Key"); // Odstranjevanje vrednosti: localStorage.removeItem ("Key"); // Počisti ves prostor za shranjevanje: localStorage.clear ();

Z localStorage lahko delate tudi kot navaden niz:

// Shrani vrednost: localStorage ["Key"] = "Vrednost"; // Pridobite vrednost: var value = localStorage ["Key"]; // Izbriši vrednost: delete localStorage ["Key"];

Poleg predmeta localStorage obstaja tudi predmet sessionStorage... Delo z njim poteka na enak način, edina razlika je v tem, da se vsi podatki iz njega samodejno uničijo po zaprtju brskalnika ali zavihka s spletnim mestom. No, localStorage shranjuje podatke dolgo časa, dokler te podatke ne odstrani skript ali pa uporabnik brskalnika počisti lokalni pomnilnik z nastavitvami.

Primeri

V naslednjem primeru bomo uporabniško ime zapisali v lokalni pomnilnik:

LocalStorage.setItem ("ime", "Ivan");

Čez nekaj časa bomo dobili to ime nazaj:

Opozorilo (localStorage.getItem ("ime"));

Kot vidite, tukaj ni nič zapletenega, vse je veliko preprostejše kot enako delo s piškotki.

Shranjevanje predmetov

Lokalni pomnilnik ne more shraniti predmetov in matrik JavaScript, čeprav je to pogosto priročno. Vendar obstaja način - te podatke morate serijsko prenesti v format JSON - dobite niz, ki ga je že mogoče shraniti v localStorage. Potem, ko moramo ta predmet dobiti nazaj - pretvorite niz iz JSON nazaj v objekt - in ga mirno uporabite.

Oglejmo si ta postopek s primerom. Serializirajte predmet in ga shranite v lokalno pomnilnik:

// Podan predmet: var obj = (ime: "Ivan", arr :); // Serializiraj v "(" ime ":" Ivan "," arr ":)": var json = JSON.stringify (obj); // Pišite v localStorage s ključem obj: localStorage.setItem ("obj", json);

Čez nekaj časa dobimo predmet nazaj:

// Pridobite podatke nazaj iz localStorage kot JSON: var json = localStorage.getItem ("obj"); // Pretvori jih nazaj v objekt JavaScript: var obj = JSON.parse (json); console.log (obj);

Dodatne lastnosti

Določanje števila zapisov v pomnilniku: opozorilo (localStorage.length).

Določanje imena ključa po njegovi številki: opozorilo (localStorage.key (številka)).

Pri izvajanju operacij s pomnilnikom se dogodek sproži na skladišču... Če funkcijo povežete s tem dogodkom, bo v njem na voljo objekt Event z naslednjimi lastnostmi:

funkcija funkcija (dogodek) (var ključ = event.key; // ključ podatkov, ki se spreminjajo var oldValue = event.oldValue; // stara vrednost var newValue = event.newValue; // nova vrednost var storageArea = event.storageArea; // skladiščno območje)

Dodaj. material

Shranjevanje matrike v lokalni pomnilnik: https://youtu.be/sYUILPMnrIo

Kaj storiti naslednje:

Začnite reševati naloge na naslednji povezavi: naloge za lekcijo.

Ko se vse odločite, nadaljujte s študijem nove teme.

Lekcija št.
seznam predvajanja na youtubu
Praktični ES6

Nekateri videoposnetki so morda v teku, saj do te točke v vadnici nismo pregledali vsega ES6. Samo preskočite te videoposnetke in si jih oglejte pozneje.

Pregled spletne shrambe

Na internetu so informacije lahko shranjene na dveh mestih: na spletnem strežniku in na spletnem odjemalcu (tj. računalniku obiskovalca strani). Nekatere vrste podatkov je najbolje shraniti na eni od teh lokacij, druge vrste pa na drugi.

Pravo mesto za shranjevanje občutljivih in pomembnih podatkov je spletni strežnik. Na primer, če dodate izdelke v nakupovalni voziček v spletni trgovini, so vaši potencialni podatki o nakupu shranjeni na spletnem strežniku. Na vašem računalniku je shranjenih le nekaj bajtov podatkov o sledenju, ki vsebujejo podatke o vas (oziroma o vašem računalniku), tako da spletni strežnik ve, kateri segment je vaš. Tudi z novimi zmožnostmi HTML5 tega sistema ni treba spreminjati – je zanesljiv, varen in učinkovit.

Toda shranjevanje podatkov na strežnik ni vedno najboljši pristop. včasih je lažje shraniti nebistvene podatke na uporabnikov računalnik. Na primer, smiselno je shraniti uporabniške nastavitve (recimo nastavitve, ki določajo, kako je spletna stran prikazana) in stanje aplikacije (posnetek trenutnega stanja spletne aplikacije) lokalno, tako da lahko obiskovalec nadaljuje od tam, kjer je bil pozneje. čas.

Pred HTML5 je bil edini način za lokalno shranjevanje podatkov uporaba datotečnega mehanizma piškotki ki je bil prvotno zasnovan za izmenjavo majhnih količin identifikacijskih informacij med spletnimi strežniki in brskalniki. Piškotki so idealni za shranjevanje majhnih količin podatkov, vendar je model JavaScript za delo z njimi nekoliko neroden. Sistem piškotkov tudi prisili razvijalca, da se poigrava z datumi poteka in neuporabno pošilja podatke naprej in nazaj po internetu z vsako zahtevo strani.

HTML5 uvaja boljšo alternativo piškotkom, ki omogoča enostavno in preprosto shranjevanje informacij na računalnik obiskovalca. Te informacije je mogoče shraniti na odjemalskem računalniku za nedoločen čas, se ne pošiljajo spletnemu strežniku (razen če razvijalec to stori sam), so lahko velike in za delo zahteva le nekaj preprostih, učinkovitih objektov JavaScript.

Ta priložnost se imenuje spletno shranjevanje in je še posebej primeren za uporabo z način brez povezave delo spletnih strani, ker vam omogoča, da ustvarite samostojne samostojne aplikacije, ki lahko shranijo vse informacije, ki jih potrebujejo, tudi če ni internetne povezave.

Funkcija spletnega shranjevanja HTML5 omogoča spletni strani, da shrani podatke v računalnik obiskovalca. Te informacije so lahko kratkoročne, ki se izbrišejo po izklopu brskalnika, ali dolgoročne, ki ostanejo na voljo ob naslednjih obiskih spletne strani.

Podatki, shranjeni v spletni shrambi, pravzaprav niso shranjeni na internetu, temveč na računalniku obiskovalca spletne strani. Z drugimi besedami, spletno shranjevanje ne pomeni shranjevanja podatkov na internetu, temveč shranjevanje podatkov iz interneta.

Obstajata dve vrsti spletnega pomnilnika, ki sta nekako povezani z dvema objektoma:

Lokalno shranjevanje

Uporablja predmet localStorage za trajno shranjevanje podatkov za celotno spletno mesto. To pomeni, da če spletna stran shranjuje podatke v lokalni pomnilnik, bodo ti podatki na voljo uporabniku, ko se naslednji dan, naslednji teden ali naslednje leto vrne na to spletno stran.

Seveda večina brskalnikov uporabniku ponuja tudi možnost brisanja lokalnega pomnilnika. V nekaterih brskalnikih se izvaja kot strategija vse ali nič in izbriše vse lokalne podatke, podobno kot se izbriše piškotek. (Pravzaprav so v nekaterih brskalnikih piškotki in lokalni pomnilnik med seboj povezani, zato je edini način za brisanje lokalnih podatkov brisanje piškotkov.) Drugi brskalniki lahko uporabniku omogočijo ogled podatkov za vsako posamezno spletno mesto in brisanje podatkov za izbrano spletno mesto ali spletna mesta.

Shramba podatkov seje

Uporablja predmet sessionStorage za začasno shranjevanje podatkov za eno okno ali zavihek brskalnika. Ti podatki so na voljo le, dokler uporabnik ne zapre okna ali zavihka, po katerem se seja konča in podatki izbrišejo. Toda podatki o seji ostanejo, če se uporabnik pomakne na drugo spletno mesto in se nato vrne, pod pogojem, da se to zgodi v istem oknu brskalnika.

Z vidika kode spletne strani tako lokalno shranjevanje kot shranjevanje podatkov o seji delujeta popolnoma enako. Edina razlika je v trajanju shranjevanja podatkov.

Uporaba lokalnega pomnilnika zagotavlja najboljša priložnost shraniti zahtevane podatke za nadaljnje obiske spletne strani s strani uporabnika. In shramba sej se uporablja za shranjevanje podatkov, ki jih je treba prenesti z ene strani na drugo. (Shramba sej lahko shrani tudi začasne podatke, ki jih uporablja samo ena stran, vendar običajne spremenljivke JavaScript za ta namen delujejo zelo dobro.)

Lokalni pomnilnik in shramba seje sta povezana z domeno spletnega mesta. Če torej podatke za stran www..html shranite v lokalni pomnilnik, bodo ti podatki na voljo za stran www..html, saj obe strani imata isto domeno. Toda ti podatki ne bodo na voljo za strani drugih domen.

Poleg tega, saj spletna shramba se nahaja na vašem računalniku (oz Mobilna naprava) danega uporabnika, je povezana s tem računalnikom, spletna stran pa se je odprla ta računalnik in shranjevanje podatkov v svojem lokalnem pomnilniku, nima dostopa do informacij, ki jih je shranil na drug računalnik. Prav tako spletna stran ustvari ločeno lokalno trgovino, če se prijavite z drugim uporabniškim imenom ali zaženete drug brskalnik.

Medtem ko specifikacija HTML5 ne določa nobenih strogih in hitrih pravil za največji prostor za shranjevanje, ga večina brskalnikov omejuje na 5 MB. V ta nosilec lahko zapakirate veliko podatkov, vendar to ne bo dovolj, če želite uporabiti lokalni pomnilnik za optimizacijo zmogljivosti in v njem predpomniti velike slike ali videoposnetke (in v resnici lokalni pomnilnik ni zasnovan za takšne namene ).

Še vedno razvijajoči se standard baze podatkov za shranjevanje velikih količin podatkov IndexedDB Omogoča veliko več lokalnega prostora za shranjevanje – običajno 50 MB za začetek in več, če se strinjate.

Shranjevanje podatkov

Preden lahko shranite del informacij v lokalno pomnilnik ali shrambo seje, ji morate dati opisno ime. To ime se imenuje ključ in je potrebno za pridobivanje podatkov v prihodnosti.

Sintaksa za shranjevanje dela podatkov je naslednja:

localStorage = podatki;

// JS localStorage ["username"] = "Ivan Petrov";

Seveda ni smiselno shraniti kos statičnega besedila. Praviloma moramo shraniti nekakšne spremenljive podatke, na primer trenutni datum, rezultat matematičnega izračuna ali besedilne podatke, ki jih uporabnik vnese v polja obrazca. Spodaj je primer shranjevanja besedilnih podatkov, ki jih vnese uporabnik:

Spletno shranjevanje To besedilo bo shranjeno v lokalni pomnilnik:
To besedilo bo shranjeno v shrambo podatkov seje:

Funkcija saveData () (// Pridobite vrednosti besedilnih polj var localData = document.getElementById ("localData"). Value; var sessionData = document.getElementById ("sessionData"). Vrednost; // Shranite vneseno besedilo v besedilnem polju v lokalni pomnilnik localStorage ["localData"] = localData; // Besedilo, vneseno v besedilno polje, shranimo v pomnilnik seje sessionStorage ["sessionData"] = sessionData;) funkcija loadData () (// Naloži shranjeno podatki iz pomnilnikov var localData = localStorage ["localData"]; var sessionData = sessionStorage ["sessionData"]; // Prikaži te podatke v besedilnih poljih if (localData! = null) (document.getElementById ("localData"). value). = localData;) if (sessionData! = null) (document.getElementById ("sessionData"). value = sessionData;))

Stran vsebuje dve besedilni polji: za lokalno shranjevanje (zgoraj) in za shranjevanje seje (spodaj). S klikom na gumb Shrani se shrani besedilo, vneseno v besedilna polja, s klikom na gumb Naloži pa se v poljih prikažejo ustrezni shranjeni podatki.

Spletna shramba podpira tudi manj običajno sintakso lastnosti. V skladu s pravili te sintakse označujemo lokacijo shranjevanja z imenom uporabniško ime kot localStorage.username, ne localStorage ["uporabniško ime"]. Obe vrsti sintakse sta enakovredni, uporaba ene ali druge pa je stvar osebnih preferenc.

Spletno shranjevanje ne bo delovalo brez spletnega strežnika

Pri raziskovanju spletnega shranjevanja lahko naletite na nepričakovano težavo. V mnogih brskalnikih spletno shranjevanje deluje samo za strani, ki jih zagotavlja spletni strežnik. V tem primeru ni pomembno, kje se strežnik nahaja, v internetu ali na vašem računalniku, najpomembnejše je, da se strani ne zaženejo iz lokalnega trdi disk(npr. dvojni klik z ikono datoteke strani).

Ta funkcija je stranski učinek načina, kako brskalniki dodeljujejo lokalni prostor za shranjevanje. Kot smo že omenili, brskalniki omejujejo lokalno shranjevanje za vsako spletno mesto na 5 MB, tako da vsako stran, ki želi uporabljati lokalno pomnilnik, povežejo z domeno spletnega mesta.

Kaj se zgodi, ko odprete stran, ki uporablja spletno shranjevanje z vašega lokalnega trdega diska? Vse je odvisno od brskalnika. Brskalnik internet Explorer zdi se, da v celoti izgublja podporo za spletno shranjevanje. Objekta localStorage in sessionStorage izgineta, pri poskusu njihove uporabe pa se pojavi napaka JavaScript.

V brskalnik Firefox Objekta localStorage in sessionStorage ostaneta na mestu in se zdi, da sta podprta (tudi Modernizr zazna, da sta podprta), toda kar koli je poslano v shrambo, izgine nihče ne ve kam. V brskalnik Chrome spet nekaj drugega – večina funkcionalnosti spletnega pomnilnika deluje, kot bi morala, vendar nekatere funkcije (na primer dogodek onStorage) ne delujejo.

Podobne težave se pojavljajo pri File API. Zato si prihranite veliko težav, če preizkušate stran na testnem strežniku, da se izognete vsem tem nejasnostim.

Podpora brskalnika za spletno shranjevanje

Spletna shramba je ena najbolj podprtih funkcij HTML5, z dobro stopnjo podpore v vsakem večjem brskalniku. Spodnja tabela prikazuje minimalne različice glavnih brskalnikov, ki podpirajo spletno shranjevanje:

Vsi ti brskalniki zagotavljajo lokalno in sejno shranjevanje. Toda za podporo dogodka onStorage so potrebne novejše različice brskalnikov, kot so IE 9, Firefox 4 ali Chrome 6.

Najbolj problematičen je IE 7, ki sploh ne podpira spletnega shranjevanja. Kot rešitev lahko posnemate spletno shranjevanje s piškotki. To res ni popolna rešitev, vendar deluje. Čeprav ni uradnega skripta za zapolnitev te vrzeli, je nekaj dobrih izhodišč mogoče najti na strani HTML5 Cross Browser (v razdelku »Spletna shramba«).

Prevod članka: Kako uporabljati lokalno shranjevanje za JavaScript.
Sara Vieira.

Spoznavanje osnov programiranja JavaScript se pogosto začne z ustvarjanjem najpreprostejših aplikacij, kot je elektronski zvezek, ki ga uporabljamo za beleženje stvari in dogodkov, na katere lahko pozabimo. Toda takšne aplikacije imajo eno težavo - po ponovnem nalaganju strani seznam vseh predhodno zapuščenih zapisov izgine, to pomeni, da se aplikacija vrne v prvotno stanje.

Obstaja zelo preprost izhod iz te situacije z uporabo mehanizma localStorage. Ker nam localStorage omogoča shranjevanje potrebnih podatkov na uporabnikov računalnik, bo zgornji seznam načrtovanih opravil in dogodkov še vedno na voljo po ponovnem nalaganju strani, poleg tega je localStorage presenetljivo zelo na preprost način shranjevanje podatkov in dostop do njih, ko je to potrebno.

Kaj je localStorage?

To je lokalni shranjevalni mehanizem, ki je del tehnologije spletnega shranjevanja, kot je opredeljena v specifikaciji HTML5. Ta specifikacija dovoljuje dve možnosti shranjevanja:

Lokalna shramba: omogoča shranjevanje informacij brez omejitev glede obdobij shranjevanja. To možnost bomo uporabili, saj je treba seznam nalog, ki so na voljo v našem primeru, trajno shraniti.
Uporaba sej: zagotavlja varnost podatkov le za obdobje ene seje, torej ko uporabnik zapre zavihek naše aplikacije in ga ponovno odpre, vse potrebno za nadaljnje delo podatki o aplikaciji bodo izbrisani.

Preprosto povedano, vse, kar počne Web Storage, je shranjevanje podatkov v obrazcu imenovani ključ/vrednost lokalno in za razliko od drugih dveh metod, od katerih ima vsaka svoje pomanjkljivosti ( Shranjevanje informacij seje predvideva za to uporabo strežniške strani, poleg tega se po zaključku seje uporabnika te informacije izbrišejo, in čeprav se piškotki uporabljajo za shranjevanje na strani odjemalca, niso zanesljivi, ker lahko uporabnik svojo podporo prekine prek nastavitve brskalnika.) shrani podatke, tudi če ste zaprli brskalnik ali izklopili računalnik. ( * Dovolil sem si, da sem vsebino tega odstavka nekoliko spremenil in dopolnil, saj menim, da je avtor naredil netočnosti v izvirniku.)

Html

Če se držimo našega primera, v katerem želimo ustvariti elektronsko različico zvezek, spodaj so vse potrebne komponente za njegovo izvedbo:

Polje za vnos novih zapisov (dogodki, primeri itd.).
Gumb za potrditev vnesenega vnosa.
Gumb za brisanje že ustvarjenega seznama opravil.
Neurejen seznam, ki bo napolnjen z novimi vnosi.
Končno potrebujemo div kot vsebnik, ki vsebuje sporočila, ki se prikažejo uporabniku, na primer opozorilo, da je pozabil vnesti vrednost za naslednji zapis, pri čemer je vnosno polje prazno.

Posledično bi morala naša oznaka izgledati nekako takole:

To je precej standardna predloga HTML, ki jo lahko napolnimo z dinamično ustvarjeno vsebino z uporabo JavaScripta.

JavaScript

Kar zadeva strukturo najpreprostejše aplikacije beležnice v našem primeru, je prva stvar, ki jo moramo narediti, zagotoviti, da se sledi dogodku klika gumba. "Dodaj opombo" in preverite, ali so v besedilno polje za snemanje vneseni kakšni podatki, torej v trenutku pritiska na gumb ne sme biti prazno. Nekaj podobnega:

$ ("# dodaj"). kliknite (funkcija () (
// če je besedilno polje prazno
$ ("# opozorilo"). html (" Pozor! Vnesite vnos v besedilo
polje.");
vrni false;
}

Evo, kaj naredimo s tem kosom kode. Ko je gumb pritisnjen "Dodaj opombo" preverimo, ali je uporabnik kaj vnesel v polje za nov vnos... Če tega ni storil, se prikaže div, ki smo ga zagotovili za prikaz sporočil, ki uporabnika obvesti, da vnosno polje zapisa ni izpolnjeno, nato pa po 1000 ms (1 sekunda) element div in s tem sporočilo, izgine. Funkcija nato vrne false, nakar brskalnik preneha izvajati preostali del skripta in aplikacija je spet pripravljena za vnos novega zapisa.

Naš naslednji korak je, da dodamo vrednost, vneseno v polje za zapise, na začetek seznama, tako da ustvarimo nov element seznama. Tako bo, ko uporabnik doda še en vnos, ta vedno postavljen na začetek seznama opravil in pričakovanih dogodkov. Po tem moramo le shraniti seznam z mehanizmom localStorage:

// Dodajte vnos na obstoječi seznam
$ ("# opravila"). predpriprej ("

"+ Opis +"

");
// Počisti vnosno polje
$ ("# obrazec"). ponastavi ();

vrni false;
});

Kot ste morda opazili, tukaj ni nič nenavadnega, uporablja se standardna različica koda jQuery. Na točki dostopa do objekta localStorage moramo podati podatke, ki jih shranjujemo v obliki ključa/vrednosti. Za ključ se lahko uporabi poljubno ime in poimenoval sem ga "todos", potem moramo navesti, kaj pravzaprav moramo ohraniti v spominu. V tem primeru gre za popoln kos oznake HTML, ki je vključen v neurejen seznam (nahaja se med oznakami), ki prikazuje vse predhodno vnesene zapise s strani uporabnika. Iz kode lahko vidite, da z metodo jQuery .html () preprosto pridobimo fragment, ki ga potrebujemo, in na koncu, po zaključku vseh potrebnih dejanj, nastavimo vrnjeno vrednost funkcije na false, kar preprečuje obliko podatkov od posredovanja in s tem ponovnega nalaganja naše strani.

Zdaj recimo, da je naš uporabnik že vnesel več vnosov in za nadaljnje normalno delovanje aplikacije moramo preveriti, ali localStorage vsebuje podatke, ki so bili predhodno shranjeni v računalniku, in jih, če je, prikazati uporabniku. Ker je ime našega ključa "todos", moramo preveriti njegov obstoj na naslednji način:

// če so v lokalnem pomnilniku že podatki, jih prikaži

}

Za preverjanje prisotnosti podatkov smo uporabili običajni stavek if in, ko je bil določen pogoj izpolnjen, smo vse podatke preprosto pridobili iz lokalnega pomnilnika in jih postavili kot oznako HTML znotraj neurejenega seznama, s pomočjo katerega prikažejo se zapisi, ki jih je uporabnik vnesel prej.

Če preizkusite svojo najpreprostejšo aplikacijo, boste ugotovili, da po ponovnem nalaganju strani vse ostane na svojem mestu. In zdaj, zadnja stvar, ki nam ostane, je ustvariti funkcijo, s katero bi uporabnik po potrebi izbrisal vse svoje zapise. To dosežete tako, da počistite localStorage in znova naložite stran, da aktivirate izvedene spremembe. Nato kot v prejšnjem primeru kot vrnjeno vrednost funkcije nastavimo false, kar preprečuje, da bi se hash pojavil v URL-ju. ( * in se ne pomika po strani navzgor.):

// Popolno čiščenje localStorage
window.localStorage.clear ();
location.reload ();
vrni false;
});

Rezultat je popolnoma funkcionalna aplikacija. In če združimo vse zgornje odrezke, dobimo celotno kodo aplikacije:

$ ("# dodaj"). kliknite (funkcija () (
var Opis = $ ("# opis"). val ();
if ($ ("# opis"). val () == "") (
$ ("# opozorilo"). html (" Pozor! Vnesite vnos
besedilno polje.");
$ ("# opozorilo"). fadeIn (). zamuda (1000) .fadeOut ();
vrni false;
}
$ ("# opravila"). predpriprej ("

"
+ Opis + "

");
$ ("# obrazec"). ponastavi ();
var todos = $ ("# opravil"). html ();
localStorage.setItem ("todos", todos);
vrni false;
});

if (localStorage.getItem ("todos")) (
$ ("# nalog"). html (localStorage.getItem ("todos"));
}

$ ("# počisti"). kliknite (funkcija () (
window.localStorage.clear ();
location.reload ();
vrni false;
});

Podpora za brskalnik.

Specifikacija HTML5 zagotavlja precej zmogljivo podporo za tehnologijo Web Storage, tako da jo izvaja tudi večina priljubljenih brskalnikov, tudi IE8. IE7 ostaja edina težava, če vas to še vedno zanima.

Zaključek.

V tako majhnih aplikacijah lahko mehanizem localStorage precej uspešno nadomesti uporabo baz podatkov. Za shranjevanje majhnih količin podatkov ni treba uporabljati bolj izpopolnjenih alternativ.

* Opomba prevajalca.

Ogledov objave: 475

Prevod: Vlad Merzhevich

Obstojno lokalno shranjevanje je eno od področij, kjer odjemalske aplikacije izkoriščajo prednosti strežniških aplikacij. Za aplikacije, kot je operacijski sistem, zagotavlja abstrakcijski sloj za shranjevanje in pridobivanje podatkov, kot so nastavitve ali status izvajanja. Te vrednosti je mogoče shraniti v registru, datotekah INI, datotekah XML ali drugje, odvisno od načel platforme. Če vaša odjemalska aplikacija potrebuje lokalni pomnilnik za več kot le par ključ/vrednost, lahko vstavite svojo bazo podatkov, pripravite svojo obliko datoteke ali poljubno število drugih rešitev.

V preteklosti spletne aplikacije niso imele nobenega od teh luksuzov. Piškotki so bili izumljeni zgodaj v zgodovini interneta in se lahko uporabljajo za trajno shranjevanje majhnih količin podatkov lokalno. Imajo pa tri možne slabosti:

Piškotki so vključeni v vsako zahtevo HTTP in s tem upočasnijo vašo spletno aplikacijo, da ne bi po nepotrebnem prenašala istih podatkov znova in znova.
Piškotki so vključeni v vsako zahtevo HTTP, ko se podatki prenašajo po internetu v nešifrirani obliki (tudi če se celotna spletna aplikacija prenaša prek SSL);
Piškotki so omejeni na velikost podatkov približno 4 KB – dovolj za upočasnitev vaše aplikacije (glejte zgoraj), vendar ne dovolj, da bi bili uporabni.

Tukaj je tisto, kar si resnično želimo:

veliko prostora za shranjevanje;
delo na strani naročnika;
upoštevajte osvežitev strani;
ni pošiljanja na strežnik.

Pred HTML5 so vsi poskusi, da bi to dosegli, na različne načine propadli.

Kratka zgodovina lokalnega pomnilnika pred HTML5

Na začetku je bil samo en Internet Explorer. Avtor vsaj Microsoft je želel, da tako misli svet. V ta namen v okviru Prve Velika vojna brskalniki Microsoft je izumil toliko stvari in jih vključil v svoj brskalnik, ki je končal vojno - Internet Explorer. Ena od teh stvari se je imenovala DHTML Behaviors, eno od vedenj pa se imenuje userData.

UserData omogoča spletni strani, da shrani do 64 KB podatkov na domeno v hierarhični strukturi, podobni XML. Zaupanja vredne domene, kot so intranetna spletna mesta, lahko shranijo desetkrat več. In hej, 640 KB bi moralo biti dovolj za vse. IE ni zagotovil nobenega načina za spreminjanje teh konvencij, zato ni mogoče povečati količine razpoložljivega pomnilnika.

Leta 2002 je Adobe predstavil funkcijo v Flashu 6, ki se je izkazala za ponesrečeno in z zavajajočim imenom – »Flash Cookies«. V okolju Flash je ta zmožnost bolj znana kot lokalni predmeti v skupni rabi (LSO). Skratka, objektom Flash omogoča shranjevanje do 100 KB podatkov na domeno. Brad Neuberg, ki je razvil zgodnji prototip mostu med Flashom in JavaScriptom, ga je poimenoval AMASS (AJAX Massive Storage System), vendar je bil omejen zaradi nekaterih posebnosti Flash oblikovanja. Do leta 2006 je z uvedbo ExternalInterface v Flash 8 dostopanje do LSO prek JavaScripta postalo veliko hitrejše in enostavnejše. Brad je ponovno napisal AMASS in ga integriral v priljubljeno orodje Dojo Toolkit pod vzdevkom dojox.storage. Flash "brezplačen" daje vsaki domeni 100 kb prostora za shranjevanje. Poleg tega uporabnika pozove, da na zahtevo poveča kapaciteto pomnilnika za red velikosti (1 MB, 10 MB itd.).

if (Modernizr.localstorage) (
// window.localStorage je na voljo!
) drugo (
// ni domače podpore za shranjevanje HTML5
}

Uporaba pomnilnika HTML5

Shramba HTML5 temelji na imenih parov ključ/vrednost. Podatke shranite na podlagi imena ključa, nato pa jih lahko pridobite z istim ključem. Ime ključa je niz. Podatki so lahko katere koli vrste, ki jo podpira JavaScript, vključno z nizi, logičnimi vrednostmi, celimi števili ali števili s plavajočo vejico. Vendar so v resnici podatki shranjeni kot niz. Če shranjujete in pridobivate nize, ki niso nizi, boste morali uporabiti funkcije, kot sta parseInt () ali parseFloat (), da prevedete nastale podatke v veljavne vrste JavaScript.

Vmesnik za shranjevanje (
Pridobite preko getItem (ključ);
Nastavi preko setItem (ključ, podatki);
};

Klicanje setItem () z obstoječim imenom ključa bo tiho prepisalo prejšnjo vrednost. Klicanje getItem () z neobstoječim ključem bo vrnilo NULL namesto vrnitve izjeme.

Tako kot drugi predmeti JavaScript se lahko na objekt localStorage sklicujete kot na asociativno matriko. Namesto uporabe metod getItem () in setItem (), lahko preprosto določite oglati oklepaji... Na primer ta del kode

var foo = localStorage.getItem ("bar");
// ...
localStorage.setItem ("bar", foo);

lahko prepišemo s sintakso oglatih oklepajev:

var foo = localStorage ["bar"];
// ...
localStorage ["bar"] = foo;

Obstajajo tudi metode za brisanje vrednosti po imenu ključa in brisanje celotne trgovine (to je brisanje vseh ključev in vrednosti hkrati).

Vmesnik za shranjevanje (
Odstrani prek removeItem (ključ);
jasno ();
}

Klicanje removeItem () z neobstoječim ključem ne bo vrnilo ničesar.

Nazadnje je na voljo lastnost za pridobivanje skupnega števila vrednosti v območju za shranjevanje in za ponavljanje vseh ključev po indeksu (dobi ime vsakega ključa).

Vmesnik za shranjevanje (
dolžina
Pridobi ključ (nenegativno celo število);
}

Če pri klicanju tipke () indeks ni v območju od 0 do (dolžina-1), bo funkcija vrnila nič.

Sledenje shranjevalnemu območju HTML5

Če želite programsko slediti spremembam pomnilnika, morate ujeti dogodek shranjevanja. Ta dogodek se sproži na objektu okna, ko se pokliče setItem (), removeItem () ali clear () in nekaj spremeni. Če na primer nastavite obstoječo vrednost ali pokličete clear (), ko ni ključev, se dogodek ne bo sprožil, ker se območje shranjevanja v resnici ni spremenilo.

Dogodek shranjevanja je podprt povsod, kjer deluje objekt localStorage, vključno z Internet Explorerjem 8. IE 8 ne podpira standarda W3C addEventListener (čeprav bo končno dodan v IE 9), zato morate za ujeti dogodek shranjevanja preveriti, kateri mehanizem dogodkov podpira brskalnik (če ste to že storili z drugimi dogodki, lahko ta razdelek preskočite do konca). Prestrezanje shranjevalnega dogodka deluje na enak način kot prestrezanje drugih dogodkov. Če za registracijo obdelovalcev dogodkov raje uporabljate jQuery ali katero drugo knjižnico JavaScript, lahko to storite tudi s pomnilnikom.

če (window.addEventListener) (
window.addEventListener ("shramba", handle_storage, false);
) drugo (
window.attachEvent ("onstorage", handle_storage);
};

Povratni klic handle_storage bo poklican z objektom StorageEvent, razen v Internet Explorerju, kjer so dogodki shranjeni v window.event.

funkcija handle_storage (e) (
če (! e) (e = okno.dogodek;)
}

V tem primeru bo e objekt StorageEvent, ki ima naslednje uporabne lastnosti.

* Opomba: lastnost url se je prvotno imenovala uri in nekateri brskalniki so to lastnost podpirali pred spremembo specifikacije. Za največjo združljivost preverite, ali lastnost url obstaja, in če ne, namesto tega preverite lastnost uri.

Dogodka shranjevanja ni mogoče preklicati, ni mogoče ustaviti spremembe znotraj povratnega klica handle_storage. To je samo način brskalnika, da vam pove: »Hej, to se je pravkar zgodilo. Nič ne moreš storiti, samo želel sem, da veš."

Omejitve v trenutnih brskalnikih

Ko sem govoril o zgodovini lokalnega shranjevanja z vtičniki tretjih oseb, sem omenil omejitve vsake tehnike. Spomnil sem se, da nisem rekel ničesar o omejitvah zdaj standardnega pomnilnika HTML5. Dal vam bom odgovore in jih nato razložil. Odgovori po pomembnosti so »5 megabajtov«, »QUOTA_EXCEEDED_ERR« in »ne«.

"5 megabajtov" - koliko prostora za shranjevanje je privzeto zagotovljeno. Ta pomen je presenetljivo enak v vseh brskalnikih, čeprav je oblikovan kot nič drugega kot predlog v specifikaciji HTML5. Razumeti morate, da shranjujete nize in ne podatke v izvirni obliki. Če shranite veliko celih števil ali števil s plavajočo vejico, je lahko razlika v predstavitvi velika. Vsaka številka v številu s plavajočo vejico je shranjena kot znak, ne kot običajna predstavitev takšnih številk.

»QUOTA_EXCEEDED_ERR« je izjema, ki jo dobite, če presežete svojo kvoto 5 MB. "Ne" je odgovor na naslednje očitno vprašanje: "Ali lahko prosim uporabnika za več prostora za shranjevanje?" V času pisanja tega pisanja brskalniki niso uvedli nobenega mehanizma, s katerim bi spletni razvijalci zahtevali več prostora za shranjevanje. Nekateri brskalniki (kot je Opera) uporabniku omogočajo nadzor kvot za shranjevanje za vsako spletno mesto, vendar je to zgolj pobuda uporabnika in ne nekaj, kar lahko kot razvijalec vgradite v svojo spletno aplikacijo.

Shramba HTML5 v akciji

Oglejmo si shrambo HTML5 v akciji. Vrnimo se k tistemu, ki smo ga zgradili v poglavju o risanju. Pri tej igri je majhna težava: če sredi igre zaprete okno brskalnika, boste izgubili rezultate. Toda s shranjevanjem HTML5 lahko ohranimo igranje na mestu, v samem brskalniku. Odprite demo, naredite nekaj potez, zaprite zavihek brskalnika in ga nato znova odprite. Če vaš brskalnik podpira shranjevanje HTML5, si bo demo stran čarobno zapomnila natančen položaj v igri, vključno s številom potez, ki ste jih naredili, položajem vsake figure na plošči in celo izbrano figuro.

Kako deluje? Vsakič, ko pride do spremembe v igri, bomo to funkcijo poklicali.

funkcija saveGameState () (

localStorage ["halma.game.in.progress"] = gGameInProgress;
za (var i = 0; i< kNumPieces; i++) {
localStorage ["halma.piece." + i + ".vrstica"] = gKosi [i] .vrstica;
localStorage ["halma.piece." + i + ".column"] = gKosi [i] .column;
}
localStorage ["halma.selectedpiece"] = gSelectedPieceIndex;
localStorage ["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
localStorage ["halma.movecount"] = gMoveCount;
vrni true;
}

Kot lahko vidite, se objekt localStorage uporablja za shranjevanje napredka igre (gGameInProgress, boolean). Nato ponovi vse žetone (gPieces, matrika JavaScript) in shrani vrstico in stolpec za vsakega od njih. Po tem se shranijo nekatera dodatna stanja igre, vključno z izbranim kosom (gSelectedPieceIndex, celo število), kosom, ki je v sredini dolge serije skokov (gSelectedPieceHasMoved, boolean) in skupnim številom opravljenih potez (gMoveCount, celo število) .

Ko se stran naloži, namesto da bi samodejno poklicali funkcijo newGame (), ki bi vse spremenljivke vrnila na njihove prvotne vrednosti, pokličemo resumeGame (). Funkcija resumeGame () uporablja pomnilnik HTML5 za preverjanje stanja igre v lokalnem pomnilniku. Če je prisoten, obnovi vrednosti z uporabo predmeta localStorage.

funkcija resumeGame () (
if (! supportsLocalStorage ()) (vrne false;)
gGameInProgress = (localStorage ["halma.game.in.progress"] == "true");
if (! gGameInProgress) (vrni false;)
gPieces = nova matrika (kNumPieces);
za (var i = 0; i< kNumPieces; i++) {
var row = parseInt (localStorage ["halma.piece." + i + ".row"]);
var stolpec = parseInt (localStorage ["halma.piece." + i + ".column"]);
gPieces [i] = nova celica (vrstica, stolpec);
}
gNumPieces = kNumPieces;
gSelectedPieceIndex = parseInt (localStorage ["halma.selectedpiece"]);
gSelectedPieceHasMoved = localStorage ["halma.selectedpiecehasmoved"] == "true";
gMoveCount = parseInt (localStorage ["halma.movecount"]);
vlečna deska ();
vrni true;
}

Najpomembnejši del te funkcije je opozorilo, ki sem ga omenil prej v tem poglavju in ga bom tukaj ponovil: podatki so shranjeni kot nizi. Če shranjujete kaj drugega kot nize, jih morate ob prejemu pretvoriti. Na primer, zastavica, da je igra v teku (gGameInProgress), je logičnega tipa. V funkciji saveGameState () jo samo shranimo in ne skrbimo za vrsto podatkov.

localStorage ["halma.game.in.progress"] = gGameInProgress;

Toda v resumeGame () moramo gledati na vrednost, ki smo jo dobili iz lokalnega pomnilnika kot niz, in ročno sestaviti lastno logično vrednost.

gGameInProgress = (localStorage ["halma.game.in.progress"] == "true");

Prav tako je število premikov shranjeno v gMoveCount kot celo število, v funkciji saveGameState () ga preprosto shranimo.

localStorage ["halma.movecount"] = gMoveCount;

Toda v resumeGame () moramo vrednost pretvoriti v celo število s pomočjo JavaScript-ove vgrajene funkcije parseInt ().

gMoveCount = parseInt (localStorage ["halma.movecount"]);

Onstran par ključ/vrednost: konkurenčna vizija

Čeprav je bilo v zgodovini veliko trikov in rešitev, je trenutno stanje shranjevanja HTML5 presenetljivo dobro. Novi API je bil standardiziran in vključen v vse glavne brskalnike, platforme in naprave. Za spletnega razvijalca tega ne vidite vsak dan, kajne? Ampak to je več kot 5 megabajtov parov ključ/vrednost in prihodnost trajnega lokalnega shranjevanja je ... kako naj rečem ... no, naj bo to konkurenčna vizija.

Ena vizija je akronim, ki ga že poznate - SQL. Leta 2007 je Google predstavil Gears, vtičnik za več brskalnikov z odprto kodo izvorno kodo ki vključuje vdelano bazo podatkov na osnovi SQLite. Ta zgodnji prototip je pozneje vplival na oblikovanje specifikacije spletne baze podatkov SQL. Spletna baza podatkov SQL (prej znana kot "WebDB") zagotavlja tanek ovoj okoli baze podatkov podatki SQL, ki vam omogoča, da iz JavaScripta naredite naslednje:

openDatabase ("dokumenti", "1.0", "Lokalno shranjevanje dokumentov", 5 * 1024 * 1024, funkcija (db) (
db.changeVersion ("", "1.0", funkcija (t) (
t.executeSql ("USTVARI TABELE docids (id, ime)");
), napaka);
});

Kot lahko vidite, je večina dejanj v skladu z metodo ExecuteSQL. Ta niz lahko podpira kateri koli ukaz SQL, vključno z SELECT, UPDATE, INSERT in DELETE. To je kot programiranje baze podatkov na strani strežnika, le da to počnete z JavaScript! O veselje!

Specifikacija spletne baze podatkov SQL je bila implementirana v štirih brskalnikih in platformah.

Podpora za spletno bazo podatkov SQL

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
–	–	4.0+	4.0+	10.5+	3.0+	2.0+

Seveda, če ste v življenju uporabljali več kot eno bazo podatkov, potem veste, da je "SQL" bolj trženjski izraz kot trden in hiter standard (nekdo bi lahko rekel enako za HTML5, vendar to ni pomembno ). Seveda obstaja posodobljena specifikacija SQL (imenovana SQL-92), vendar ni strežnika baz podatkov na svetu, ki bi ustrezal samo tej specifikaciji. Obstaja Oracle SQL, Microsoft SQL, SQL v MySQL, SQL v PostgreSQL, SQL v SQLite. Pravzaprav vsak od teh izdelkov sčasoma doda nove. funkcije SQL, zato tudi izgovor "SQL v SQLite" ni dovolj. Izgovoriti morate "različica SQL, ki je priložena različici SQLite X.Y.Z".

Vse to nas pripelje do naslednjega opozorila, ki je trenutno na vrhu specifikacije Web SQL.

Specifikacija je v slepi ulici: vsi zainteresirani razvijalci uporabljajo SQL na strani strežnika (SQLite), vendar potrebujemo več neodvisnih implementacij, da se premaknemo po poti standardizacije. Medtem ko so drugi razvijalci zainteresirani za implementacijo te specifikacije, je bil opis narečja SQL opuščen kot redni sklicevanje na Sqlite, kar za standard ni sprejemljivo.

Na podlagi tega vam bom povedal o drugi konkurenčni viziji za napredno, trajno lokalno shranjevanje za spletne aplikacije: API za indeksirano bazo podatkov, prej znan kot »WebSimpleDB«, zdaj ljubkovalno imenovan IndexedDB.

API za indeksirano bazo podatkov zagotavlja tako imenovano shranjevanje objektov z veliko idejami, izposojenimi iz baz podatkov SQL. Obstajajo "baze podatkov" z "zapisi", vsak zapis ima določeno število "polj". Vsako polje ima poseben tip podatkov, ki je definiran, ko je baza podatkov ustvarjena. Izberete lahko del zapisov, nato jih navedete s "kurzorjem". Spremembe shranjevanja objektov se obdelujejo s "transakcijami".

Če ste že kdaj programirali bazo podatkov SQL, so vam ti izrazi verjetno znani. Glavna razlika je v tem, da shramba objektov nima strukturiranega jezika poizvedb. Ne napišete pogoja, kot je "IZBERI * od USERS, kjer je AKTIVNO =" Y ". Namesto tega uporablja metode, ki jih zagotavlja shramba objektov, da odpre bazo podatkov USERS, našteje zapise, filtrira naše zapise in uporablja metode dostopnika, da dobi vrednost vsakega polja v preostalih zapisih. Zgodnji ogled IndexedDB je dober vodnik o tem, kako deluje IndexedDB, in primerjava IndexedDB s spletnim SQL.

V času pisanja je bil IndexedDB implementiran samo v beta različici Firefoxa 4. Nasprotno pa je Mozilla izjavila, da nikoli ne bo izvajala spletnega SQL. Google je dejal, da razmišlja o podpori IndexedDB za Chromium in Google Chrome... In celo Microsoft je dejal, da je IndexedDB "odličen za splet."

Kaj lahko storite kot spletni razvijalec z IndexedDB? Vklopljeno ta trenutek praktično nič drugega kot nekaj tehnoloških demonstracij. V enem letu? morda.