Web Storage
Web Storage

Web Storage este o specificație W3C care aduce standardului HTML5 funcționalități precum stocarea de date pe partea de client până la sfârșitul unei sesiuni de browsing (Session Storage) sau chiar mai mult (Local Storage). Acest mecanism de stocare a datelor este mult mai bun decât tradiționalele cookie-uri și este mai ușor de lucrat cu el. În această parte a articolului vă voi prezenta ce este și cum îl putem folosi.

Problemele principale ale cookie-urilor sunt următoarele:

  • Spațiu de stocare mic, aproximativ 4KB, ceea ce nu este de ajuns pentru a stoca date mai complexe
  • Este greu de ţinut evidenta mai multor tranzacții pe același site, care se desfășoară în tab-uri diferite.
  • Cookie-urile pot fi exploatate folosind metode precum Cross Site Scripting (XSS)

De ce Web Storage?

Specificațiile pentru Web Storage au fost scrise pentru a oferi developerilor o alternativă mai bună și mai simplă la stocarea datelor pe partea de client.

Există două tipuri de stocare: Session Storage şi Local Storage. Ambele mecanisme de stocare au o dimensiune de aproximativ 5MB pe domeniu, ceea ce înseamna mult mai mult decât ne permit cookie-urile.

Session Storage

Session Storage are scopul de a salva datele pentru o singură sesiune de browsing, aceste date fiind șterse automat când sesiunea este închisă.

Cum salvăm și citim date?

Pentru a salva date în Session Storage avem următoarele două variante:

sessionStorage.setItem(yourVariable, yourValue);
sessionStorage.yourVariable= yourValue;

Singura condiție folosind cea de-a doua metodă este ca ‘yourVariable’ să respecte regulile pentru numele variabilelor în javascript.

Pentru a citi variabila de mai sus:

var item = sessionStorage.getItem(yourVariable);
var item = sessionStorage.yourVariable;

Pentru a șterge o variabilă din Session Storage:

var item = sessionStorage.removeItem(yourVariable);

Comanda de mai sus salvează valoarea variabilei în ‘item’ și o șterge din storage.

Dacă vrem să ştergem toate variabilele salvate:

sessionStorage.clear();

Pentru a afla câte valori avem salvate în storage, se poate folosi length:

var no_of_items = sessionStorage.length;

Local Storage

Local Storage se folosește atunci când vrem să păstram variabilele între sesiuni, de exemplu, să numărăm numărul de vizite a unui utilizator pe o pagină.

Salvarea și citirea datelor se face în același mod ca și în cazul Session Storage, singura diferență fiind aceea că vom folosi localStorage în loc de sessionStorage.

Evenimente pentru Web Storage

Specificațiile pentru Web Storage prevăd și o serie de evenimente care se execută de câte ori valorile din storage sunt modificate.

Atributele care sunt trimise către funcția ce va fi executată la eveniment sunt:

  • storageArea: Care tip de stocare a fost modificat
  • key: Numele variabilei care este modificată
  • oldValue: Valoarea veche a variabilei
  • newValue: Valoarea care este scrisă în variabilă
  • url: Adresa paginii care modifică variabila

Dacă funcţia clear() este apelată, atributele keyoldValue şi newValue vor fi null.

addEventListener('storage', function(e) {
	// aici ne folosim de e
}, false);

Din păcate, eu nu am observat ca acest eveniment să se execute în Firefox, Chrome sau Opera. În una din sugestiile găsite se menționa că ar trebui să am pagina deschisă în minim două tab-uri, iar evenimentul s-ar executa în toate tab-urile deschise în afară de cel curent.

Un scurt exemplu

Pentru a vedea funcţiile de mai sus în acţiune, am creat un simplu exemplu care numără vizualizările pe sesiune și numărul total de vizualizări.

Browsere suportate

browsere suportate tabel

Concluzii

Web Storage este o îmbunătățire binevenită, este ușor de folosit, iar faptul că o pagină web nu are access decât la valorile salvate de domeniul său este un plus de securitate, chiar dacă este bine să nu avem niciodată încredere în valorile ce ne sunt trimise de către utilizator.

Urmărește-ne pe Google News Google News

LĂSAȚI UN MESAJ

Vă rugăm să introduceți comentariul dvs.!
Introduceți aici numele dvs.