HTML5 - Stocare browser

Când lucrăm cu pagini web, există momente în care trebuie să folosim date care persistă în timpul navigării utilizatorului, totuși nu dorim sau nu putem folosi baze de date, deci pentru aceasta putem folosi stocarea în browser.
Stocare browser
Browserul ne permite să stocăm o cantitate considerabilă de date cu diferitele instrumente pe care ni le oferă. HTML5, decizia de a folosi unul sau altul trece prin definirea a ceea ce vrem să facem.
Dintre diferitele tipuri de stocare pe care le putem folosi, vom evidenția depozitare locală, cu acest tip de stocare putem salvați diferite asocieri cheie-valoare cu care putem menține o persistență a datelor utilizatorului pe computerul dvs. local de unde accesați pagina HTML5.
Stocare locală
Pentru a utiliza depozitare locală depindem de proprietatea globală localStorage, a spus proprietatea noi returnează un obiect de stocare în care vom avea diferitele asociații cheie-valoare pe care le-am menționat mai sus.
Când vom decide să lucrăm cu acest tip de stocare, vom putea conta pe diferitele sale metode pentru a putea construi funcționalitățile de care avem nevoie, din acest motiv trebuie să le cunoaștem, să vedem mai jos metodele pe care le avem în acest tip de depozitare locală.

• clar (): Această metodă ne permite să curățăm toate asociațiile stocate în obiectul nostru.
• getItem (): Ne permite să obținem valoarea asocierii folosind o cheie pe care o trecem ca parametru.
• cheie (): Ne permite să obținem cheia asociației folosind poziția dvs. pentru aceasta.
• lungime: Acesta indică cantitatea de elemente cheie-valoare pe care le-am stocat în acest moment.
• removeItem (): În loc să ștergeți toate elementele cu clear (), cu această metodă putem elimina anumite elemente folosind cheia lor ca identificator.
• setItem (,): Această metodă ne permite să adăugăm o nouă asociere sau să actualizăm una dacă cheia pe care o plasăm există deja.
• []: Ne permite să accesăm conținutul uneia dintre asociații sub forma unui tablou.

Foarte bine acum că știm metodele pe care le avem, vom face un cod demonstrativ cu care vom învăța să folosim stocarea locală:

 ExempluCheie:Valoare:Adăugați Clear
Există elemente

 
Elemente:
-

 

 

În acest exemplu am construit o funcționalitate care ne permite să scriem valori în câmpurile de tip de text de intrare și apoi prin funcții pentru a putea stoca aceste valori la nivel local.
Să vedem cum arată acest lucru în browserul nostru:

Putem observa cum putem adăuga o serie de elemente și le putem parcurge apoi pentru a le arăta.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv