O soluție simplă a acestei probleme este utilizarea spațiului de stocare local (Storage Local). Stocarea locală vă permite să stocați date pe o mașină a unui utilizator și puteți descărca cu ușurință o listă de la acesta după actualizarea paginii. În acest articol, vom scrie o listă mică de utilizări folosind depozitul local.
Ce este stocarea locală?
Stocarea locală ("spațiul de stocare web") a fost inițial parte a caietului de sarcini HTML5, dar acum este redată într-un spațiu de stocare separat. Puteți stoca datele în două moduri:
- Stocarea locală. O vom folosi permanent.
- Sesiunea de stocare. stochează datele numai pentru această sesiune, dacă utilizatorul închide pagina, datele vor fi pierdute.
Stocarea locală permite stocarea de date sub formă de perechi de chei-valoare pe computerul utilizatorului, iar aceste date vor fi disponibile chiar și după închiderea browserului sau oprirea calculatorului.
Pentru a crea o listă todo, avem nevoie de:
- O intrare de text pentru a introduce conținutul unui element.
- Buton pentru a adăuga un element în listă.
- Buton pentru a șterge lista.
- Lista în sine (
- ).
- Și o div suplimentare pentru a afișa erori.
Astfel, marcajul HTML va arăta astfel:
pentru că noi folosim jQuery este necesar să-l conectăm în plus.
În primul rând, trebuie să urmărim clicul pe butonul de adăugare și să verificăm că câmpul de introducere nu este gol:
Acest cod verifică valoarea intrării de text și, dacă este gol, indică o eroare și returnează false, astfel încât restul codului să nu fie executat și elementul să nu fie adăugat la listă.
Apoi, trebuie să adăugăm cazul în listă. Vom folosi metoda prepend, deci elementele vor fi adăugate în partea de sus a listei. Apoi întreaga listă este stocată în magazinul local:
Pentru a lucra cu spațiul de stocare local, trebuie să furnizați cheia și valoarea corespunzătoare acesteia. În cazul nostru, vom apela cheia "todos", iar valoarea va fi tot codul HTML care este inclus în listă (în etichetă
- ). Acest cod este ușor de obținut cu jQuery. Și, în cele din urmă, vom reveni false pentru a împiedica trimiterea formularului și nu pentru reîncărcarea paginii.
- Încărcare interactivă de fișiere în HTML5 și jQuery
- Creați un player audio utilizând jQuery și jPlayer
- Crearea butoanelor cu un indicator de proces încorporat
- Alegerea culorii din imagine folosind canvasul HTML5
- Creați un cursor de imagine utilizând jQuery și CSS3
- Ceas digital cu jQuery și CSS3
- Marcaje pe CSS3 pură
- Efecte pentru încărcarea animației utilizând CSS
Următorul pas este să verificați stocarea locală, dacă există o valoare cu cheia "todos", apoi încărcați lista din magazinul local:
pentru că stocăm codul HTML finalizat în depozit, apoi introducem pur și simplu acest cod în listă.
Todo-listul nostru este aproape gata, rămâne doar să punem în aplicare funcția de curățare a listei. Când utilizatorul face clic pe buton, întreaga listă este ștersă și magazinul local este șters:
Gata! Codul complet arată astfel:
Suport pentru browser
Stocarea web este susținută de toate browserele majore, chiar și de IE8. Teama este doar IE7 și mai jos.
concluzie
Depozitarea locală în astfel de aplicații mici poate fi o înlocuire excelentă a bazei de date. Depozitarea unor cantități mici de informații nu ar trebui să cauzeze dificultăți.
Vezi de asemenea
Articole similare
Trimiteți-le prietenilor: