Cum de a utiliza spațiul de stocare locală pentru JavaScript

Creați propria aplicație pentru lista de cazuri programate - aceasta este, probabil, una dintre primele aplicații care dezvoltatorii încep să învețe j # 097; vascript. Iar problema acestor aplicații este că, atunci când actualizați pagina, toate listele dispar.

Există o soluție destul de simplă, care este utilizarea de stocare locală. stocare locală este o caracteristică bună este că puteți stoca informațiile de pe hard disk utilizatorului, astfel încât atunci când actualiza pagina cu lista de sarcini programate, totul rămâne în vigoare.

Ce este de stocare locală?

sursă de imagine

Stocare locală (stocare locală) - face parte dintr-un magazin de web, care face parte din caietul de sarcini HTML5. Caietul de sarcini oferă două opțiuni de stocare:

* Stocare locală: permite stocarea de date, fără dată de expirare, și că este ceea ce vom folosi astăzi, pentru că avem nevoie pentru a obține lista de sarcini planificate rămâne în pagină, atâta timp cât este posibil.
* Sesiunea de stocare: salvează datele doar pentru o singură sesiune. Deci, în cazul în care utilizatorul închide fila, și apoi re-deschis - toate datele vor fi pierdute.

Pur și simplu pune, tot ceea ce face o stocare pe web, păstrează o locale de perechi cheie-valoare cu numele, și, spre deosebire, cookie-urile au, aceste date sunt salvate chiar dacă închideți browserul sau să opriți computerul.

Când este vorba de lista cazurilor programate, vom avea nevoie de:

* Câmp de intrare pentru numele sarcinii
* Butonul de intrare pentru a face o listă de sarcini
* Buton pentru a curăța sarcinile programate
* Listă cu marcatori, care va fi plasat problema
* Div pentru a afișa un avertisment cu privire la încercarea de a face o lista de sarcini goală.

Deci, html-codul nostru va fi după cum urmează:

Aici avem un HTML destul de simplu, pe care o vom publica conținut dinamic folosind j # 097; vascript.

La fel ca în acest exemplu, vom folosi jQuery, ar trebui să includă această bibliotecă în dvs. document HTML.

Din moment ce am fost în curs de dezvoltare o aplicație simplă pentru lista de sarcini programate, aici primul lucru pe care trebuie să ne gândim este de a prinde momentul apăsării butonului adăuga o sarcină, iar faptul că cecul nu este gol în cazul în care forma în acest moment:

Aici vom verifica apăsați butonul, și executați un test simplu dacă utilizatorul completat formularele necesare. Dacă nu, atunci există un div cu un avertisment și continuat referindu-se la 1000ms, și apoi dispare. În cele din urmă, ne întoarcem false, și astfel browser-ul nu citește restul de script-ul, și nu se adaugă la lista noastră.

Următorul lucru pe care trebuie să facem este să facă un element din listă cu valoarea furnizată în câmpul de introducere. Acest lucru se întâmplă atunci când un utilizator introduce toate datele necesare și dă clic pe un buton - fiecare sarcină nouă ajunge la partea de sus a listei, iar datele stocate în stocarea locală, după cum urmează:

După cum puteți vedea, folosește jQuery este destul de standard, și atunci când vine vorba de stocare locală, avem nevoie pentru a salva cheie și valoare. Cheia - numele pe care le sunt identificate, iar în acest caz "Todos. În continuare, trebuie să se precizeze că vom salva, și în acest caz - este întregul HTML, care este plasat în interiorul lista neordonată „todos“. După cum puteți vedea, am extras doar datele folosind jQuery, și sa întors valoare este falsă, că forma noastră nu a lansat pagina de confirmare și de repornire.

Următoarea etapă este de a testa dacă ceva este deja stocat în stocarea locală pe acest computer, și dacă da, avem nevoie pentru a afișa datele de pe pagina. Deci, așa cum ni se cere numele nostru Todos cheie, avem nevoie pentru a verifica disponibilitatea acestuia, după cum urmează:

Pentru a testa, am folosit expresia simplă în cazul în care, și atunci vom obține ceea ce ne-am stocat în stocarea locală, și puneți aceste date într-o listă neordonată HTML în sarcinile programate.

Dacă testați aplicația noastră puțin, reîncărcați pagina, veți vedea că acesta este deja de lucru, și tot ce ne-am lăsat să facem este de a crea o funcție pentru cazurile în care utilizatorul decide să îndepărteze toate formele. Când se întâmplă acest lucru, avem nevoie pentru a șterge toate conținutul stocării locale, și reîncărcați pagina pentru ca modificările să aibă efect, atunci ne întoarcem la false, pentru a preveni apariția semnului # la începutul adresei URL.

Aceasta încheie dezvoltarea cererii noastre mici, dar destul de util. Codul complet este după cum urmează:

Suport stocare pe web este destul de bun. Acesta este sprijinit de toate browserele moderne, chiar și inclusiv IE8. Problemele pot apărea decât în ​​IE7, dacă mai aveți de a face cu această versiune.

Stocarea locală în aplicații mici, poate fi o caracteristică foarte utilă. Ce altceva ai nevoie pentru a stoca cantități mici de date?