Introducere
Când dezvoltăm aplicații ușoare – este posibil să dorim să stocăm unele date. Dacă o bază de date este exagerată - există o alternativă excelentă: localStorage!
Deși nu înlocuiește o bază de date, ei bine, în scopuri de bază de date, servește ca un sistem simplu de stocare bazat pe fișiere pe care îl puteți folosi pentru a stoca puncte de date ușor accesibile.
În acest articol, vom învăța cum să folosim
localStoragepentru a stoca cu ușurință datele în browserul nostru. Aceste date sunt salvate ca perechi cheie-valoare pe care utilizatorul le poate recupera cu ușurință.
Salvarea datelor în localStorage în React este foarte ușor:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Dacă nu vă grăbiți și doriți să aflați mai multe despre cum funcționează acest lucru, continuați să citiți!
Ce este LocalStorage?
localStorage este un obiect de stocare web care permite dezvoltatorilor să stocheze perechi cheie-valoare într-un browser web și se asigură că aceste date supraviețuiesc tuturor reîmprospătărilor de pagină, chiar și atunci când un utilizator închide sau repornește un browser - și nu are o dată de expirare. Perechile cheie-valoare stocate pot include orice tip de date – matrice, obiecte, șiruri de caractere, numere și multe altele.
Cu toate acestea, acest lucru nu poate înlocui rolul bazelor de date în site-urile și aplicațiile dvs. web, deoarece datele se pierd atunci când un utilizator șterge memoria cache a browserului și stocarea locală - în cele din urmă, este depozitare locală și trebuie folosit ca atare. Cu toate acestea, există situații în care un utilizator poate utiliza localStorage, cum ar fi implementarea modul întunecat caracteristică, păstrarea valorii de intrare a formularului unui utilizator și multe altele.
localStorage are metode încorporate care ne permit să accesăm obiectul de stocare al browserului. Un exemplu este setItem() metoda, care ne permite să adăugăm o cheie și o valoare la localStorage, permițându-ne prin urmare să stocăm date. Alte metode sunt utilizate pentru a prelua date - getItem(), ștergeți datele - removeItem(), curata tot localStorage instanțe - clear(), Și așa mai departe.
Stocarea datelor către LocalStorage Cu setItem() Metodă
setItem() metoda ne permite să salvăm valori de orice tip de date în localStorage prin alocarea de valori cheilor, rezultând a pereche cheie-valoare. Această cheie ar fi folosită pentru a prelua valoarea corespunzătoare ori de câte ori dorim să o recuperăm localStorage.
Notă: Pentru a stoca date în localStorage, trebuie mai întâi să-l convertim în șir JSON folosind JSON.stringify() funcţie. Și când dorim să-l recuperăm, vom analiza datele folosind JSON.parse(), transformând șirul JSON înapoi în a obiect JSON.
Când lucrăm cu date în React, folosim frecvent cârlige pentru a ne ajuta să-l păstrăm/deținem. De asemenea, cârligele ne pot ajuta să găsim unde să încărcăm acele date. Acest lucru este valabil și pentru localStorage pentru că vom folosi useState() și useEffect() cârlige. Aceste cârlige sunt critice deoarece useState() cârlig este folosit pentru a păstra și a seta date, în timp ce useEffect() hook este declanșat implicit după prima randare și ori de câte ori starea trecută ca al doilea parametru se schimbă.
După ce am explicat fundația, iată codul în care am folosi pentru stocarea datelor localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Am creat mai întâi o stare pentru a păstra datele pe care dorim să le stocăm în noi localStorage, iar apoi am creat un useEffect() cârlig, trecând starea ca al doilea parametru. În acest fel, ori de câte ori starea se schimbă, datele din localStorage este actualizat la valoarea curentă.
Ne-am ocupat de funcționalitatea de bază, care este folosită pentru a ne ajuta în stocarea datelor, în cadrul useEffect() cârlig:
localStorage.setItem('dataKey', JSON.stringify(data));
Concluzie
În acest articol, am învățat cum să folosim cârligele React pentru a stoca date în React folosind localStorage. După cum sa menționat anterior, acest lucru nu va înlocui niciodată rolul unei baze de date, ci mai degrabă ne va ajuta să stocăm unele date legate de utilizator care pot îmbunătăți interfața de utilizare, dar nu este menită să fie menținută independent de browser.
