HTML5: despre localStorage (II)


În articolul de ieri nu am precizat un lucru important: datele ce se memorează via localStorage (similar şi pentru sessionStorage) sunt de tip text. Evident că putem salva şi numere, doar că vor ajunge salvate ca “1234”, dar la preluare le forţăm noi să fie numere. Problema este la obiecte. Vă amintiţi formularul de data trecută? Să spunem că am avea nu doar numele ci şi localitatea şi vârsta unei persoane. Acestea ar putea forma un obiect persoana, dar care, surpriză, nu poate fi salvat ca atare. Codul pe care l-am aştepta ar fi cu liniile 10 şi 28 nemarcate, marcând în schimb 12 şi 30. Nu merge (prima captură de mai jos)!

imagine

Şi atunci? Soluţia este simplă… dacă ştii de ea. M-am bucurat să găsesc o soluţie simplă, via JSON. Aplicăm o “stringifiere” (v-am zgâriat urechile? ştiu! pe româneşte o transformare în tip string) folosindu-ne de JSON.stringify(), iar la preluare simplu cu JSON.parse(). Şi totul merge perfect (a doua captură de mai sus). Am testat în diverse navigatoare de pe calculator, dar şi de pe iPhone şi o tabletă cu Android: a mers perfect. În schimb de pe telefonul meu cu Android, cam vechi, e drept, nu a mers. Oricum, de aici mi se naşte întrebarea cât de utilizabil este localStorage pentru webaplicaţii “împachetate” ca aplicaţii pentru Android? Voi testa… Dar acum codul, iar în execuţie este aici.

<!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(){
        //NU MERGE SA SCOATEM OBIECTUL
        //var persoana=window.localStorage.getItem("persoana");
        //DACA INSA AM "STRINGIFIAT" OBIECTUL, IL PUTEM REFACE
        var persoana=JSON.parse(window.localStorage.getItem("persoana"));
        if(persoana==null){
            persoana={};
            persoana.nume="Numele Dvs";
            persoana.localitate="Localitatea Dvs";
            persoana.varsta="Varsta Dvs";
        }
        $('#nume').val(persoana.nume);
        $('#localitate').val(persoana.localitate);
        $('#varsta').val(persoana.varsta);
        $('#salvare').click(function() {
            var persoana={};
            persoana.nume=$('#nume').val();
            persoana.localitate=$('#localitate').val();
            persoana.varsta=$('#varsta').val();
            //NU MERGE SA PUNEM OBIECTUL
            //window.localStorage.setItem("persoana",persoana);
            //DAR CU JSON MERGE, OBIECTUL DEVENIND UN STRING 
            window.localStorage.setItem("persoana",JSON.stringify(persoana));
        });
    });
    </script>
</head>
<body>
<input type="text" size="20" id="nume"><br />
<input type="text" size="20" id="localitate"><br />
<input type="text" size="20" id="varsta"><br />
<input type="submit" value="Salvare" id="salvare">
</body>
</html>


Apreciază articolul:

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

0 comentarii


Lasă un răspuns

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