HTML5: despre localStorage (I)


Pentru că deunăzi am vorbit despre cookies cu jQuery m-am gândit că nu am scris până acum chiar nimic despre posibilităţile oferite de HTML5 pentru salvarea de date. Drept urmare vă propun mai jos un scurt cod care merge cam pe aceeaşi idee, dar mai simplificat decât articolul de ieri, pentru că am mers pe un singur câmp (deci fără each() pentru a parcurge toate câmpurile input). Totul stă în folosirea metodelor setItem(cheie,valoare), respectiv getItem(cheie). Eventual mai putem folosi şi removeItem(cheie) şi sigur bănuiţi ce face.

imagine imagine

În codul de mai jos observaţi că am verificat dacă în depozitul local (Local Storage – ilustrat cu instrumentele pentru webmasteri din Chrome, apelabile cu F12, în tabul Resources pe calea vizibilă mai sus) există salvată vreo valoare pentru cheia nume… dacă da, o atribui controlului input; dacă nu, scriu un mesaj ca utilizatorul să ştie ce are de scris. Un click pe butonul Salvare va salva local data introdusă. Dar să vedem codul:

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<title>Test Local Storage</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var nume = window.localStorage.getItem("nume");
        if(nume==null)
            nume="Numele Dvs!";
        $('#nume').val(nume);
        $('#salvare').click(function() {
            window.localStorage.setItem("nume", $('#nume').val());
        });
    });
    </script>
</head>
<body>
<input type="text" size="20" id="nume">
<input type="submit" value="Salvare" id="salvare">
</body>
</html>

Vă invit să faceţi un experiment: în loc de localStorage să folosiţi sessionStorage. Închideţi navigatorul (sau tabul) şi reporniţi-l (redeschideţi-l): datele s-au pierdut, căci au fost salvate doar pe sesiunea respectivă. În schimb cu localStorage datele rămân şi după ce aţi închis navigatorul. Eu am făcut testele (şi cu localStorage şi cu sessionStorage în versiunile mele de Chrome, IE, Firefox şi Opera şi a mers fără probleme).

PS: Chiar dacă am folosit jQuery în codul meu, nu are nici o legătură cu localStorage şi cu sessionStorage, care ţin de HTML5, suportat de navigatoarele moderne.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (2 evaluări, media: 4,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *