Ce este localStorage?

localStorage este o functionalitate a limbajului Javascript care ne permite sa salvam date in browser. Aceasta e asemanatoare cookie-urilor, cu mici exceptii. De exemplu timpul de expirare (cookie-urile se sterg dupa un timp pe care il poti seta, dar localStorage-ul ramane asa cum e atata timp cat nu intervenim asupra lui), sau capacitatea de stocare mult mai mare fata de cea a cookie-urilor (aproximativ 2kb pentru cookie si 10mb pentru localStorage).

Functionalitatea iti permite sa salvezi date sub forma de perechi key/value care raman stocate in browser pentru a fi accesate oricand te intorci la pagina respectiva. Cheia este ca o variabila dupa numele careia putem sa gasim niste date specifice, iar valoare sunt datele propriu zise. Datorita capacitatii mari de stocare, datele stocate in value pot fi chiar si JSON-uri. Mai jos avem un exemplu simplu de cheie/valoare:

Cheie: redirectAfterLogin
Valoare: http://myWebsite.com/myProfile

Cand poate fi folosit?

localStorage o multime de posibile utilizari. Ca sa enumar cateva, as mentiona partea de user settings a unei aplicatii (ex: pagina sa se afiseze in dark mode sau sa te redirecteze spre o pagina anume dupa login) sau in cazul magazinelor online, daca am adaugat ceva in cos, si vrem sa ramana acolo chiar daca am inchis browser-ul si il accesam abia peste cateva zile. O recomandare importanta e sa nu stocam date sensibile in localStorage, ca de exemplu parole sau datele unui card.

Cum il folosim din JS

Putem folosi localStorage utilizand urmatoarele metode:

setItem – Adauga in stocarea locala a domeniului respectiv o pereche de date pentru a fi utilizate.

Ex:localStorage.setItem ( ‘My car’ ,  ‘Toyota’ );

getItem – Cu aceasta instructiune putem citi datele stocate prin setItem.

Ex:const car = localStorage.getItem( ‘My car’ );

removeItem – Aceasta instructiune, probabil ati intuit, o folosim pentru a elimina o pereche de date din localStorage.

Ex:localStorage.removeItem( ‘My car’ );

clear – Cu aceasta stergem toate “item”-ele din local storage.

Ex:localStorage.clear();