API-ul HTML pentru Stocare Web (Web Storage)
API-ul HTML Web Storage permite aplicațiilor web să stocheze date local în browserul utilizatorului și este mai bun decât cookie-urile.
Ce este HTML Web Storage?
Cu stocarea web, aplicațiile pot stoca date local în browser. Înainte de HTML5, datele aplicației trebuiau puse în cookie-uri, care erau trimise cu fiecare cerere către server. Stocarea web este mai sigură și poate stoca cantități mari de date local fără a încetini site-ul. Limita de stocare este mult mai mare decât la cookie-uri (cel puțin 5MB), iar datele nu sunt niciodată trimise către server. Stocarea este per origine (per domeniu și protocol), astfel încât toate paginile de la aceeași origine partajează aceleași date.
Obiectele API-ului Web Storage
Stocarea web oferă două obiecte: window.localStorage stochează date fără dată de expirare (nu se pierd la închiderea filei), iar window.sessionStorage stochează date pentru o singură sesiune (se pierd la închiderea filei).
Suport pentru browsere
Atât localStorage, cât și sessionStorage sunt suportate în toate browserele moderne (începând cu Chrome 4, Edge 8, Firefox 3.5, Safari 4 și Opera 11.5).
Testarea Suportului pentru API-ul Web Storage
Înainte de a folosi stocarea web, poți verifica rapid dacă browserul o suportă testând typeof(Storage).
Exemplu
Verificarea suportului pentru stocarea web.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test suport</title>
</head>
<body>
<p id="result"></p>
<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
x.innerHTML = "Browserul tău acceptă Web storage!";
} else {
x.innerHTML = "Ne pare rău, nu există suport pentru Web storage!";
}
</script>
</body>
</html>
Obiectul localStorage
Obiectul localStorage stochează date fără dată de expirare, deci acestea rămân disponibile după închiderea browserului, fiind accesibile a doua zi, săptămâna sau anul următor. Folosește localStorage.setItem() pentru a crea perechi nume/valoare și localStorage.getItem() pentru a le citi. Pentru a elimina un element, folosește localStorage.removeItem("name").
Notă: Perechile nume/valoare sunt stocate întotdeauna ca șiruri de caractere (strings), deci convertește-le într-un alt format atunci când este nevoie.
Exemplu
Stocarea și citirea valorilor cu localStorage.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stocare locală de bază</title>
</head>
<body>
<p id="result"></p>
<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
// Stochează
localStorage.setItem("lastname", "Smith");
localStorage.setItem("bgcolor", "yellow");
// Recuperează
x.innerHTML = localStorage.getItem("lastname");
x.style.backgroundColor = localStorage.getItem("bgcolor");
} else {
x.innerHTML = "Ne pare rău, nu există suport pentru Web storage!";
}
</script>
</body>
</html>
Numărarea Click-urilor cu localStorage
Acest exemplu numără de câte ori un utilizator a apăsat un buton. Șirul de caractere stocat este convertit într-un număr pentru ca numărătoarea să poată fi mărită, iar deoarece folosește localStorage, numărătoarea persistă între sesiuni.
Exemplu
Un contor de click-uri care persistă între sesiuni.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contor localStorage</title>
</head>
<body>
<button onclick="clickCounter()">Apasă-mă!</button>
<p id="result"></p>
<script>
function clickCounter() {
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
x.innerHTML = "Ai apăsat butonul de " + localStorage.clickcount + " ori!";
} else {
x.innerHTML = "Ne pare rău, nu există suport pentru Web storage!";
}
}
</script>
</body>
</html>
Obiectul sessionStorage
Obiectul sessionStorage funcționează la fel ca localStorage, doar că stochează datele pentru o singură sesiune. Datele sunt șterse când utilizatorul închide acea filă a browserului.
Numărarea Click-urilor cu sessionStorage
Acest exemplu numără de câte ori un utilizator a apăsat un buton în cadrul sesiunii curente, folosind sessionStorage.
Exemplu
Un contor de click-uri valabil doar pentru sesiune.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contor sessionStorage</title>
</head>
<body>
<button onclick="clickCounter()">Apasă-mă!</button>
<p id="result"></p>
<script>
function clickCounter() {
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
x.innerHTML = "Ai apăsat butonul de " + sessionStorage.clickcount + " ori în această sesiune!";
} else {
x.innerHTML = "Ne pare rău, nu există suport pentru Web storage!";
}
}
</script>
</body>
</html>