Local Storage & Session Storage: cum să salvezi date în browser

Dacă ești frontend developer, unul din cele mai mari avantaje pe care le ai e faptul că browser-ul e la dispoziția ta și te poți folosi de contextul lui pentru a salva ceva date sub forma unor chei cu valori.

Știu că poate ți-ar fi plăcut să fie un soi de bază de date SQL, între noi fie vorba și mie, dar din păcate asta e avem.

Suport nativ în orice browser

Atât Local Storage cât și Session Storage sunt suportate nativ de absolut toate browser-ele relevante de pe piață, atât cele de desktop cât și cele de mobil.

Pentru a accesa panoul de storage direct în browser, tot ce trebuie să faci e să deschizi panoul cu unelte de development, apăsând CTRL+SHIFT+I sau F12 (în Windows).

Mergi la tab-ul Application și apoi la panoul din stânga, în secțiunea Storage vei găsi Local Storage și Session Storage.

Local Storage

Pentru a accesa interfața de Local Storage, avem pe obiectul de window o proprietate read only, denumită simplu: localStorage

const storage = window.localStorage;

Nu sunt foarte multe acțiuni pe care pe poți face, dar e suficient cât să-ți acopere nevoile în caz că vrei să dezvolți rapid o aplicație și nu vrei să te încurci momentan cu baze de date.

Sunt suportate totuși toate acțiunile CRUD (Create, Read, Update, Delete).

Hai să le luam pe rând.

Creare (Create)

Pentru a adăuga un element în local storage, nu avem nevoie decât de o linie de cod.

storage.setItem("cheie", "valoare");

Tocmai am adăugat în LocalStorage, elementul denumit “cheie”, care are valoarea “valoare”. Simplu, așa-i?

Citire (Read)

Ca să citim valoarea elementului sau cheii pe care tocmai am adăugat-o, trebuie să apelăm funcția căreia să-i dăm ca argument cheia pe care o căutăm.

const element = storage.getItem("cheie");

Valoarea atribuită constantei element va fi valoare.

Actualizare (Update)

Pentru actualizarea unei valori deja existente nu avem o funcție dedicată, putem să folosim setItem atât pentru a crea elemente noi, cât și pentru a actualiza elemente existente. Dacă elementul cu cheia respectivă există deja, va fi actualizat, dacă nu, evident că va fi creat.

Ștergere (Delete)

Dacă vrem să ștergem un element anume, apelăm funcția removeItem și pasăm ca argument cheia elementului de șters.

storage.removeItem("cheie");

Tipuri de date suportate

Atât Local Storage cât și Session Storage, suportă toate tipurile de date folosite în JavaScript, dar ce trebuie să știi e că indiferent de tipul de dată al valorii, ea va fi salvată ca string.

localStorage.setItem("one", 1);
localStorage.setItem("b", true);

const one = localStorage.getItem("one");
const b = localStorage.getItem("b");

console.log(typeof one);
console.log(typeof b);

În segmentul de cod de mai sus, se execută următoarele acțiuni:

• Se adaugă elementele “one” cu valoarea 1 și “b” cu valoarea true
• Se citesc înapoi ambele elemente din local storage
• Se printează în consolă tipurile de date ale elementelor citite După execuția codului, în consolă vor apărea următoarele rezultate:

string
string

După cum se poate vedea, ambele rezultate au fost returnate ca tipul string. Așa că ține cont de asta, că trebuie să faci tu conversia înainte de a începe să faci logică cu ele.

Tipuri de date mai complexe

Aici vine partea interesantă, pentru că poți salva atât valori de tip string, numerice sau adevărat sau fals, cât și valori de tip Json.

const person = {
  firstName: "Ion",
  lastName: "Popescu",
};

localStorage.setItem("person1", JSON.stringify(person));

După execuția codului de mai sus, in lisa din Local Storage, o să vezi elementul person1 cu toate proprietățile și valorile obiectului descris.

Și în cazul Json ca și în cazurile anterioare, la momentul citirii elementului, trebui să transformi valoarea înapoi în Json, pentru că rezultatul primit va fi string.

const json = JSON.parse(localStorage.getItem("person1"));

Local Storage vs. Session Storage

Acum poate te întrebi care e diferența dintre cele două, din moment ce până la momentul ăsta am vorbit strict despre Local Storage.

Diferența dintre ele este una singură: local storage va rămâne acolo permanent, sau cel puțin până vei șterge tu datele intenționat, iar în cazul session storage, datele se vor șterge de fiecare dată când pagina este încărcată din nou.

Așa cum am zis și la începutul articolului, dacă ai nevoie să dezvolți rapid o aplicație, dar nu vrei momentan să-ți bați capul cu baze de date sau chiar cu platforme BaaS (Backend as a Service) de genul Firebase, poți folosi Local Storage și Session Storage pentru a stoca temporar ceva date.

Sau dacă ai dezvoltat deja aplicația până la un stadiu mai avansat și vrei poate să crești performanța salvând anumite date direct în browser-ul utilizatorului, dar mai sunt câteva lucruri de care să ții cont.

Cum să nu folosești Local Storage și Session Storage

Știu că vei fi tentat să stochezi acolo multe date pe care în mod normal le-ai pune într-o bază de date veritabilă și nu ar fi nicio problemă pentru multe dintre cazuri. Dar există o categorie de date care nu ar trebui să ajungă niciodată în văzul tuturor și acelea sunt credențialele de acces, cum ar fi nume de utilizator și/sau parolă.

Ai grijă cu ele, pentru că o dată salvate acolo, datele sunt în “văzul” tuturor. Desigur că sunt vizibile doar în browser-ul utilizatorului respectiv, dar chiar și așa, nu e o practică prea bună să faci asta.