Cookies cu jQuery


Aplicaţiile sunt diverse, dar ca să pornim de undeva iată un scenariu destul de comun: avem un formular şi dorim ca datele să fie salvate pe măsură ce sunt completate. Sunt multe soluţii, unele mai automate decât altele, dar vom încerca să rezolvăm folosindu-ne de jQuery. Din păcate nu e ceva “încorporat” în jQuery, aşa că folosim pluginul jQuery Cookier. Vedeţi acolo fişierul README pentru informaţii despre utilizarea lui. Pe scurt cu ceva de genul:

$.cookie('prajiturica', 'diplomat');

scriem în cookie-ul numit „prajiturica” valoarea „diplomat”. Şi dacă vrem să o folosim, pur şi simplu nu scriem al doilea parametru:

alert($.cookie('prajiturica');

Desigur, mai sunt diverse fineţuri, despre valabilitatea cookie-urilor ca timp şi ca „spaţiu” (adică doar în pagina unde au fost create sau în tot domeniul). Dar citiţi în README. Eu mă limitez la un exemplu scurt. Am făcut un formular cu două câmpuri input (pot fi oricâte) – vedeţi aici pagina şi vedeţi eventual şi sursa. La fiecare ridicare de tastă (keyup) dintr-un câmp, se salvează valoarea scrisă până atunci într-un cookie. Proba? Scrieţi ceva în câmpuri şi reîncărcaţi pagina: valorile vor fi acolo! Nu e simplu? Ba da.

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<title>Test Data()</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="jquery.cookie.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#formular>input").each(function(){
                valoare=$.cookie("salvat"+$(this).attr("id"));
                if(valoare!=null){
                    $("#"+$(this).attr("id")).val(valoare);
                }
            });
            $("#formular>input").keyup(function(){
                $.cookie("salvat"+$(this).attr("id"), $(this).val());
            });
        })
    </script>
</head>
<body>
    <form method="post" id="formular">
        Nume:<br />
        <input type="text" size="30" id="nume"><br />
        Prenume:<br />
        <input type="text" size="30" id="prenume">
    </form>
</body>
</html>

Apreciază articolul:

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

0 comentarii


Lasă un răspuns

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