Lokalna pohrana. Za korištenje localStorage za JavaScript potrebna je lokalna pohrana kolačića

Ovo je prilično standardni HTML predložak koji možemo ispuniti dinamički generiranim sadržajem pomoću JavaScripta.

JavaScript

Što se tiče strukture najjednostavnije aplikacije bilježnice u našem primjeru, prva stvar koju trebamo učiniti je osigurati da se prati događaj klika na gumb. "Dodaj bilješku" i provjerite da li je u tekstualno polje za snimanje unesena neka informacija, odnosno da u trenutku pritiska na tipku ne smije biti prazno. Nešto kao ovo:

$ ("# dodaj"). kliknite (funkcija () (
// ako je polje za tekst prazno
$ ("# upozorenje"). html (" Pažnja! Unesite unos u tekst
polje.");
vratiti false;
}

Evo što ćemo učiniti s ovim dijelom koda. Kada se pritisne tipka "Dodaj bilješku" provjeravamo je li korisnik nešto upisao u polje za novi unos... Ako to nije učinio, pojavljuje se div koji smo mi dali za prikaz poruka, koji obavještava korisnika da polje za unos zapisa nije popunjeno, a zatim, nakon 1000ms (1 sekunda), element div, i sukladno tome poruka, nestaje. Funkcija tada vraća false, nakon čega preglednik prestaje izvršavati ostatak skripte i aplikacija je ponovno spremna za unos novog zapisa.

Naš sljedeći korak je dodavanje vrijednosti unesene u polje za zapise na početak popisa generiranjem nove stavke popisa. Dakle, kada korisnik doda još jedan unos, on će uvijek biti stavljen na početak popisa obveza i očekivanih događaja. Nakon toga, sve što trebamo učiniti je spremiti popis pomoću mehanizma localStorage:

// Dodajte unos na postojeći popis
$ ("# zadataka"). prepend ("

Kao što ste možda primijetili, ovdje nema ničeg neobičnog, koristi se standardna verzija jQuery kod. U trenutku pristupa objektu localStorage, moramo specificirati podatke koje spremamo u obliku ključa/vrijednosti. Za ključ se može koristiti proizvoljno ime, a ja sam ga nazvao "todos", tada trebamo naznačiti što, zapravo, trebamo zadržati u sjećanju. U ovom slučaju, to je potpuni dio HTML oznake koji je uključen u neuređeni popis (koji se nalazi između oznaka) koji prikazuje sve prethodno unesene zapise od strane korisnika. Iz koda možete vidjeti da jednostavno dohvaćamo fragment koji nam je potreban pomoću metode jQuery .html () i na kraju, nakon dovršetka svih potrebnih radnji, postavljamo povratnu vrijednost funkcije na false, što sprječava oblik podatke od slanja i stoga ponovno učitavanje naše stranice.

Sada, recimo, naš korisnik je prethodno napravio nekoliko unosa i za daljnji normalan rad aplikacije moramo provjeriti sadrži li localStorage podatke prethodno spremljene na računalu i, ako je tako, prikazati ih korisniku. Budući da je naziv našeg ključa "todos", moramo provjeriti njegovo postojanje na sljedeći način:

// ako već postoje podaci u lokalnoj pohrani, onda ih prikaži

}

Za provjeru prisutnosti podataka koristili smo uobičajenu if naredbu i, kada je navedeni uvjet bio ispunjen, jednostavno smo dohvatili sve podatke iz lokalne memorije, stavljajući ih kao HTML oznaku unutar neuređenog popisa, uz pomoć kojeg Prikazuju se zapisi koje je korisnik ranije unio.

Ako testirate svoju najjednostavniju aplikaciju, vidjet ćete da nakon ponovnog učitavanja stranice sve ostaje na svom mjestu. A sada, zadnje što nam preostaje je stvoriti funkciju s kojom bi korisnik, ako je potrebno, mogao izbrisati sve svoje zapise. To se postiže brisanjem localStorage i ponovnim učitavanjem stranice kako biste aktivirali napravljene promjene. Zatim, kao i u prethodnom slučaju, postavljamo false kao povratnu vrijednost funkcije, što sprječava pojavljivanje hasha u URL-u. ( * i ne pomiče stranicu prema gore.):

// Potpuno čišćenje localStorage
window.localStorage.clear ();
location.reload ();
vratiti false;
});

Rezultat je potpuno funkcionalna aplikacija. I sastavljajući sve gore navedene isječke zajedno, dobivamo potpuni kod aplikacije:

$ ("# dodaj"). kliknite (funkcija () (
var Opis = $ ("# opis"). val ();
if ($ ("# opis"). val () == "") (
$ ("# upozorenje"). html (" Pažnja! Unesite unos u
polje za tekst.");
$ ("# upozorenje"). fadeIn (). kašnjenje (1000) .fadeOut ();
vratiti false;
}
$ ("# zadataka"). prepend ("

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

$ ("# clear"). kliknite (funkcija () (
window.localStorage.clear ();
location.reload ();
vratiti false;
});

Podrška za preglednik.

HTML5 specifikacija pruža prilično snažnu podršku za tehnologiju Web Storagea, tako da je implementiraju i većina popularnih preglednika, čak i IE8. IE7 ostaje jedini problem ako vas to još uvijek zanima.

Zaključak.

U tako malim aplikacijama mehanizam localStorage može prilično uspješno zamijeniti korištenje baza podataka. Ne morate koristiti sofisticiranije alternative za pohranu malih količina podataka.

* Bilješka prevoditelja.

Broj pregleda: 475

Prijevod: Vlad Merzhevich

Trajna lokalna pohrana jedno je područje u kojem klijentske aplikacije iskorištavaju prednosti poslužiteljskih aplikacija. Za aplikacije poput operacijski sustav, pruža sloj apstrakcije za pohranu i dohvaćanje podataka kao što su postavke ili status izvršenja. Ove vrijednosti mogu biti pohranjene u registru, INI datotekama, XML datotekama ili drugdje, ovisno o principima platforme. Ako je vašoj klijentskoj aplikaciji potrebna lokalna pohrana za više od para ključ/vrijednost, možete umetnuti vlastitu bazu podataka, smisliti vlastiti format datoteke ili bilo koji broj drugih rješenja.

Povijesno gledano, web aplikacije nisu imale nijedan od ovih luksuza. Kolačići su izumljeni rano u povijesti interneta i mogu se koristiti za trajno pohranjivanje malih količina podataka lokalno. Ali imaju tri potencijalne nedostatke:

• Kolačići su uključeni u svaki HTTP zahtjev, čime se usporava vaša web aplikacija od nepotrebnog prijenosa istih podataka iznova i iznova.
• Kolačići su uključeni u svaki HTTP zahtjev kada se podaci prenose putem Interneta u nekriptiranom obliku (čak i ako se cijela web aplikacija prenosi putem SSL-a);
• Kolačići su ograničeni na veličinu podataka od približno 4 KB - dovoljno da uspore vašu aplikaciju (vidi gore), ali nedovoljno da budu korisni.

Evo što stvarno želimo:

• puno prostora za pohranu;
• rad na strani klijenta;
• uzeti u obzir osvježavanje stranice;
• nema slanja na server.

Prije HTML5, svi pokušaji da se to postigne u konačnici su propali na razne načine.

Kratka povijest lokalne pohrane prije HTML5

U početku je postojao samo jedan Internet Explorer. Po barem Microsoft je želio da svijet tako misli. U tu svrhu u okviru Prve Veliki rat preglednici Microsoft je izumio toliko stvari i ugradio ih u svoj preglednik koji je završio rat - Internet Explorer. Jedna od tih stvari se zvala DHTML Behaviors, a jedno od ponašanja zove se korisnički podaci.

UserData omogućuje web stranici pohranjivanje do 64 KB podataka po domeni u hijerarhijskoj strukturi nalik XML-u. Pouzdane domene kao što su intranet stranice mogu pohraniti deset puta više. I hej, 640 KB bi svima trebalo biti dovoljno. IE nije pružio nikakav način za promjenu ovih konvencija, tako da ne postoji način da se poveća količina dostupne memorije.

Adobe je 2002. godine predstavio značajku u Flash 6, koja se pokazala nesretnom i s pogrešnim nazivom - "Flash Cookies". U Flash okruženju ova je mogućnost poznatija kao lokalni dijeljeni objekti (LSO). Ukratko, omogućuje Flash objektima pohranu do 100 KB podataka po domeni. Brad Neuberg, koji je razvio rani prototip mosta između Flasha i JavaScripta, nazvao ga je AMASS (AJAX Massive Storage System), ali je bio ograničen nekim hicima Flash dizajna. Do 2006., s uvođenjem ExternalInterfacea u Flash 8, pristup LSO-ovima putem JavaScripta postao je za red veličine brži i lakši. Brad je prepisao AMASS i integrirao ga u popularni Dojo Toolkit pod aliasom dojox.storage. Flash "besplatno" daje svakoj domeni 100 kb prostora za pohranu. Osim toga, poziva korisnika da poveća kapacitet pohrane za red veličine na zahtjev (1 MB, 10 MB, itd.).

if (Modernizr.localstorage) (
// window.localStorage je dostupan!
) drugo (
// nema izvorne podrške za HTML5 pohranu
}

Korištenje HTML5 pohrane

HTML5 pohrana temelji se na nazivima parova ključ/vrijednost. Informacije pohranjujete na temelju naziva ključa, a zatim ih možete dohvatiti istim ključem. Naziv ključa je niz. Podaci mogu biti bilo koje vrste koje JavaScript podržava, uključujući nizove, logičke vrijednosti, cijele brojeve ili brojeve s pomičnim zarezom. Međutim, u stvarnosti, podaci se pohranjuju kao niz. Ako spremate i dohvaćate nizove, morat ćete koristiti funkcije kao što su parseInt () ili parseFloat () da prevedete rezultirajuće podatke u važeće JavaScript vrste.

Sučelje za pohranu (
Dobiti putem getItem (ključ);
Postavite putem setItema (ključ, podaci);
};

Pozivanje setItem () s postojećim imenom ključa tiho će prepisati prethodnu vrijednost. Pozivanje getItem () s nepostojećim ključem vratit će NULL umjesto izbacivanja iznimke.

Kao i drugi JavaScript objekti, možete se odnositi na objekt localStorage kao na asocijativni niz. Umjesto korištenja metoda getItem () i setItem (), možete jednostavno odrediti uglate zagrade... Na primjer, ovaj dio koda

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

može se prepisati pomoću sintakse uglastih zagrada:

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

Postoje i metode za brisanje vrijednosti prema nazivu ključa, kao i brisanje cijele trgovine (odnosno brisanje svih ključeva i vrijednosti u isto vrijeme).

Sučelje za pohranu (
Ukloniti putem removeItema (ključ);
čisto ();
}

Pozivanje removeItem () s nepostojećim ključem neće vratiti ništa.

Konačno, postoji svojstvo za dobivanje ukupnog broja vrijednosti u području pohrane i za ponavljanje svih ključeva po indeksu (dobije ime svakog ključa).

Sučelje za pohranu (
duljina
Dobiti ključ (nenegativan cijeli broj);
}

Ako, prilikom pozivanja tipke (), indeks nije u rasponu od 0 do (duljina-1), funkcija će vratiti null.

Praćenje područja za pohranu HTML5

Ako želite programski pratiti promjene pohrane, morate uhvatiti događaj pohrane. Ovaj događaj se aktivira na objektu prozora kada se pozove setItem (), removeItem () ili clear () i promijeni nešto. Na primjer, ako postavite postojeću vrijednost ili pozovete clear () kada nema ključeva, događaj se neće pokrenuti jer se područje pohrane nije stvarno promijenilo.

Događaj pohrane podržan je svugdje gdje radi objekt localStorage, uključujući Internet Explorer 8. IE 8 ne podržava standard W3C addEventListener (iako će konačno biti dodan u IE 9), pa da uhvatite događaj pohrane morate provjeriti koji mehanizam događaja podržava preglednik (ako ste to već učinili s drugim događajima, možete preskočiti ovaj odjeljak do kraja). Presretanje događaja pohrane radi na isti način kao i presretanje drugih događaja. Ako radije koristite jQuery ili neku drugu JavaScript biblioteku za registraciju rukovatelja događajima, to možete učiniti i sa pohranom.

if (window.addEventListener) (
window.addEventListener ("pohrana", handle_storage, false);
) drugo (
window.attachEvent ("onstorage", handle_storage);
};

Povratni poziv handle_storage bit će pozvan s objektom StorageEvent, osim u Internet Exploreru, gdje su događaji pohranjeni u window.event.

funkcija handle_storage (e) (
ako (! e) (e = prozor.događaj;)
}

U ovom slučaju, e će biti objekt StorageEvent koji ima sljedeća korisna svojstva.

* Napomena: svojstvo url izvorno se zvalo uri i neki su preglednici podržavali ovo svojstvo prije promjene specifikacije. Za maksimalnu kompatibilnost, trebali biste provjeriti postoji li svojstvo url, a ako ne, umjesto toga provjerite svojstvo uri.

Događaj pohrane se ne može otkazati, ne postoji način da se zaustavi promjena unutar handle_storage povratnog poziva. To je samo način na koji vam preglednik kaže: “Hej, to se upravo dogodilo. Ne možete ništa učiniti, samo sam želio da znate."

Ograničenja u trenutnim preglednicima

Dok sam govorio o povijesti lokalne pohrane s dodacima trećih strana, spomenuo sam ograničenja svake tehnike. Sjetio sam se da nisam rekao ništa o ograničenjima sada standardne HTML5 pohrane. Dat ću vam odgovore i onda ih objasniti. Odgovori, prema redoslijedu važnosti, su “5 megabajta”, “QUOTA_EXCEEDED_ERR” i “ne”.

"5 megabajta" - koliko je prostora za pohranu predviđeno prema zadanim postavkama. Ovo je značenje iznenađujuće isto u svim preglednicima, iako je formulirano kao samo prijedlog u HTML5 specifikaciji. Morate razumjeti da pohranjujete nizove, a ne podatke u izvornom formatu. Ako pohranjujete puno cijelih brojeva ili brojeva s pomičnim zarezom, razlika u predstavljanju može biti velika. Svaka znamenka u broju s pomičnim zarezom pohranjuje se kao znak, a ne kao uobičajeni prikaz takvih brojeva.

"QUOTA_EXCEEDED_ERR" je iznimka koju dobivate ako premašite svoju kvotu od 5 MB. "Ne" je odgovor na sljedeće očito pitanje: "Mogu li zatražiti od korisnika više prostora za pohranu?" U vrijeme pisanja ovog teksta, preglednici nisu implementirali nikakav mehanizam za web programere da zatraže više prostora za pohranu. Neki preglednici (kao što je Opera) dopuštaju korisniku da kontrolira kvote pohrane za svaku stranicu, ali ovo je isključivo inicijativa korisnika, a ne nešto što vi, kao programer, možete ugraditi u svoju web aplikaciju.

HTML5 pohrana u akciji

Pogledajmo HTML5 pohranu na djelu. Vratimo se na onu koju smo izgradili u poglavlju o crtanju. Postoji mali problem s ovom igrom: ako zatvorite prozor preglednika usred igre, izgubit ćete rezultate. Ali s HTML5 pohranom možemo zadržati igru ​​na mjestu, u samom pregledniku. Otvorite demo, napravite nekoliko poteza, zatvorite karticu preglednika, a zatim je ponovo otvorite. Ako vaš preglednik podržava HTML5 pohranu, demo stranica će magično zapamtiti točnu poziciju u igri, uključujući koliko ste poteza napravili, položaj svake figure na ploči, pa čak i odabranu figuru.

Kako radi? Svaki put kada dođe do promjene u igri, nazvat ćemo ovu funkciju.

funkcija saveGameState () (

localStorage ["halma.game.in.progress"] = gGameInProgress;
za (var i = 0; i< kNumPieces; i++) {
localStorage ["halma.piece." + i + ".red"] = gKomadi [i] .red;
localStorage ["halma.piece." + i + ".stupac"] = gKomadi [i] .stupac;
}
localStorage ["halma.selectedpiece"] = gSelectedPieceIndex;
localStorage ["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved;
localStorage ["halma.movecount"] = gMoveCount;
vratiti istinito;
}

Kao što možete vidjeti, objekt localStorage koristi se za spremanje napretka igre (gGameInProgress, boolean). Zatim iterira sve tokene (gPieces, JavaScript polje) i pohranjuje redak i stupac za svaki od njih. Nakon toga spremaju se neka dodatna stanja igre, uključujući odabranu figuru (gSelectedPieceIndex, cijeli broj), figuru koja se nalazi u sredini dugog niza skokova (gSelectedPieceHasMoved, boolean) i ukupan broj napravljenih poteza (gMoveCount, integer) .

Kada se stranica učita, umjesto automatskog pozivanja funkcije newGame () koja bi vratila sve varijable na njihove izvorne vrijednosti, pozivamo resumeGame (). Funkcija resumeGame () koristi HTML5 pohranu za provjeru stanja igre u lokalnoj pohrani. Ako postoji, vraća vrijednosti pomoću objekta localStorage.

funkcija nastavitiGame () (
if (! supportsLocalStorage ()) (vrati false;)
gGameInProgress = (localStorage ["halma.game.in.progress"] == "true");
if (! gGameInProgress) (vrati false;)
gPieces = novi niz (kNumPieces);
za (var i = 0; i< kNumPieces; i++) {
var row = parseInt (localStorage ["halma.piece." + i + ".row"]);
var stupac = parseInt (localStorage ["halma.piece." + i + ".column"]);
gPieces [i] = nova ćelija (red, stupac);
}
gNumPieces = kNumPieces;
gSelectedPieceIndex = parseInt (localStorage ["halma.selectedpiece"]);
gSelectedPieceHasMoved = localStorage ["halma.selectedpiecehasmoved"] == "true";
gMoveCount = parseInt (localStorage ["halma.movecount"]);
drawBoard ();
vratiti istinito;
}

Najvažniji dio ove funkcije je upozorenje koje sam spomenuo ranije u ovom poglavlju i ponovit ću ovdje: podaci se pohranjuju kao nizovi. Ako pohranjujete nešto drugo osim nizova, morate ih pretvoriti po primitku. Na primjer, zastavica da je igra u tijeku (gGameInProgress) je boolean tip. U funkciji saveGameState () samo je spremamo i ne brinemo o vrsti podataka.

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

Ali u resumeGame (), moramo promatrati vrijednost koju smo dobili iz lokalne memorije kao string i ručno konstruirati vlastiti boolean.

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

Isto tako, broj poteza je pohranjen u gMoveCount kao cijeli broj, u funkciji saveGameState () jednostavno ga spremamo.

localStorage ["halma.movecount"] = gMoveCount;

Ali u resumeGame (), moramo pretvoriti vrijednost u cijeli broj pomoću ugrađene JavaScript funkcije parseInt ().

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

Onkraj para ključ/vrijednost: kompetitivna vizija

Iako je u povijesti bilo mnogo trikova i rješenja, trenutno stanje HTML5 pohrane je iznenađujuće dobro. Novi API je standardiziran i uključen u sve glavne preglednike, platforme i uređaje. Za web developera, ovo se ne viđa svaki dan, zar ne? Ali to je više od 5 megabajta parova ključ/vrijednost, a budućnost trajne lokalne pohrane je... kako reći... pa, neka to bude vizija konkurencije.

Jedna vizija je akronim koji već znate - SQL. 2007. Google je lansirao Gears, dodatak za više preglednika s otvorenim kodom izvorni kod koji uključuje ugrađenu bazu podataka baziranu na SQLiteu. Ovaj rani prototip kasnije je utjecao na stvaranje specifikacije Web SQL baze podataka. Web SQL baza podataka (prije poznata kao "WebDB") pruža tanki omot oko baze podataka SQL podaci, što vam omogućuje sljedeće stvari iz JavaScripta:

openDatabase ("dokumenti", "1.0", "Lokalna pohrana dokumenata", 5 * 1024 * 1024, funkcija (db) (
db.changeVersion ("", "1.0", funkcija (t) (
t.executeSql ("STVORI TABLICU docids (id, name)");
), pogreška);
});

Kao što možete vidjeti, većina radnji je na liniji s ExecuteSQL metodom. Ovaj niz može podržati bilo koju SQL naredbu, uključujući SELECT, UPDATE, INSERT i DELETE. To je kao programiranje baze podataka na strani poslužitelja, osim što to radite s JavaScriptom! O radosti!

Specifikacija Web SQL baze podataka implementirana je u četiri preglednika i platforme.

Naravno, ako ste u životu koristili više od jedne baze podataka, onda znate da je "SQL" više marketinški izraz nego čvrst i brz standard (netko bi mogao reći isto za HTML5, ali to nije važno ). Naravno, postoji ažurirana SQL specifikacija (nazvana SQL-92), ali ne postoji poslužitelj baze podataka na svijetu koji je samo u skladu s ovom specifikacijom. Postoji Oracle SQL, Microsoft SQL, SQL u MySQL, SQL u PostgreSQL, SQL u SQLite. Zapravo, svaki od ovih proizvoda s vremenom dodaje nove. SQL funkcije, pa čak ni reći "SQL u SQLite" nije dovoljno. Morate reći "verzija SQL-a koja dolazi s verzijom SQLite-a X.Y.Z".

Sve nas ovo dovodi do sljedećeg upozorenja, trenutno na vrhu Web SQL specifikacije.

Specifikacija je u slijepoj ulici: svi zainteresirani programeri koriste SQL na strani poslužitelja (SQLite), ali trebamo više neovisnih implementacija da bismo krenuli na standardizacijski put. Dok su drugi programeri zainteresirani za implementaciju ove specifikacije, opis SQL dijalekta ostavljen je kao redovita referenca na Sqlite, što nije prihvatljivo za standard.

U tom kontekstu donijet ću vam još jednu konkurentsku viziju za naprednu, trajnu lokalnu pohranu za web aplikacije: API indeksirane baze podataka, ranije poznat kao “WebSimpleDB”, sada od milja nazvan IndexedDB.

API indeksirane baze podataka pruža ono što se naziva pohrana objekata, s puno ideja posuđenih iz SQL baza podataka. Postoje “baze podataka” s “zapisima”, svaki zapis ima određeni broj “polja”. Svako polje ima specifičan tip podataka koji je definiran prilikom kreiranja baze podataka. Možete odabrati dio zapisa, a zatim ih popisati "kurzorom". Promjene u pohrani objekata obrađuju se "transakcijama".

Ako ste ikada programirali SQL bazu podataka, ovi pojmovi su vam vjerojatno poznati. Glavna razlika je u tome što pohrana objekata nema strukturirani jezik upita. Ne pišete uvjet poput "ODABIR * od KORISNIKA gdje je AKTIVNO =" Y ". Umjesto toga, koristi metode koje pruža pohrana objekata za otvaranje baze podataka KORISNIKA, nabrajanje zapisa, filtriranje naših zapisa i korištenje metoda pristupa kako bi dobili vrijednost svakog polja u preostalim zapisima. Rani pregled IndexedDB je dobar vodič o tome kako IndexedDB radi i uspoređuje IndexedDB s Web SQL-om.

U vrijeme pisanja ovog teksta, IndexedDB je implementiran samo u beta verziji Firefoxa 4. Nasuprot tome, Mozilla je izjavila da nikada neće implementirati Web SQL. Google je rekao da razmatra IndexedDB podršku za Chromium i Google Chrome... Čak je i Microsoft rekao da je IndexedDB "izvrstan za web".

Što možete učiniti kao web programer s IndexedDB? Na ovaj trenutak praktički ništa osim nekih tehnoloških demonstracija. U godini? Može biti.