Alaturi de cookie-uri, care sunt folosite pentru a stoca informatii ce se doresc a fi accesate de catre server, un website mai foloseste doua metode principale de stocare de informatii: local si session storage. Aceste doua forme de stocare a datelor locale a datelor (in calculatorul vizitatorului) fac parte din Web Storage API si sunt accesibile doar de catre website-ul ce le-a creat conform politicii “same-origin”, cu session storage avand posibilitatea de a diferentia intre mai multe instante ale aceluiasi website (tab-uri sau ferestre multiple deschise).

Cea mai importanta diferenta intre session si local storage este durata retinerii datelor, unde session este sters dupa ce site-ul este inchis, iar local este permanent. Ma voi concentra pe local storage in acest articol pentru a demonstra cum poate fi folosit drept o mini baza de date pentru website si cum poate el imbunatati experienta vizitatorului.

De ce as folosi local storage?

Cu exceptia unei stergeri a datelor manuala de catre vizitator prin setarile de la browser sau o reinstalare completa a browser-ului/systemului de operare, datele stocate nu au termen de experiare si pot fi accesate folosind javascript de fiecare data cand website-ul este incarcat. Acest lucru iti permite sa refolosesti datele intre sesiuni.

Astfel poti aduce cateva imbunatari la cum functioneaza website-ul care pot sa ii ajute pe vizitatori sau sa faca website-ul mult mai dinamic:

– date completate intr-un formular, fie ca vorbim de text sau alte tipuri de campuri
– variabile ce pot fi refolosite pentru a putea schimba elemente dinamice din site
– salvarea starii unei pagini din website pentru ca vizitatorul sa poata continua de unde a ramas dupa reincarcare, similar cu salvarile facute in jocuri

Cum se foloseste?

Fiecare valoare stocata trebuie sa foloseasca o cheie unica pentru a putea fi accesata, modificata sau stearsa ulterior. Valoarea este stocata sub forma de string folosind in principal javascript si are limite diferite in functie browser (deobicei intre 5 si 10MB per website).

– scrierea unei valori:
localStorage.setItem(‘cheie’, ‘valoare’)

– accesarea unei valori:
localStorage.getItem(‘cheie’)
sau
localStorage.cheie

– stergerea unei valori:
localStorage.removeItem(‘cheie’)

Puteti accesa un exemplu de cod scris de mine la urmatorul link: https://codepen.io/Puiu/pen/PoRKMPr

Ai nevoie sa faci un website care se modifica in functie de ce face vizitatorul si ai vrei sa pastreze acele modificari? Vrei sa creezi un joculet? Sau pur si simplu vrei ca cineva sa nu mai piarda datele completate intr-un formular lung din cauza unei probleme care inchide tab-ul sau fereastra? Local storage iti va permite sa creezi ceva cu adevarat special pentru vizitatorii tai daca este folosit cum trebuie.