Lucrul cu cookie-urile

Iata un tutorial despre cum sa salvezi (creezi), recuperezi (extragi) si stergi cookie-urile folosind JavaScript. Aceste functii sunt tot ceea ce iti trebuie pentru a folosi cookieuri pe site-ul tau web. Ca de obicei, include tot codul sursa.

Vedere de ansamblu asupra cookie-urilor

Un cookie te iti permite sa stochezi o cantitate mica de informatie despre un utilizator care iti viziteaza site-ul. Un cookie este un mic fisier text care se afla stocat in computerul vizitatorului site-ului de catre browserul acestuia.
Datorita faptului ca cookie-ul este stocat in computerul utilizatorului, acesta nu ocupa nici un spatiu pe server, indiferent de cati utilizatori dispui.
Poti folosi cookie-urile pentru a salva preferintele utilizatorului, pentru a personaliza datele, pentru a memoriza ultima vizita, sau pentru a tine evidenta articolelor intr-o anumita ordine, pe masura ce un utilizator efectueaza o cautare. Cookie-urile pot ajuta la oferirea unei note personale site-ului tau, amintind informatiile pe care vizitatorii site-ului tau le-au introdus ultima data.

Vizualizarea fisierelor cookie cu Firefox

Cand programezi cookie-uri, vei dori sa verifici daca continutul fisierului tau cookie sunt configurate asa cum doresti. Eu prefer sa vizualizez cookie-uri cu browserul Firefox ( Obtine  Firefox cu bara de unelte  Google.)

Pentru a-ti vizualiza cookie-ul, urmeaza acesti pasi (valabili pentru Firefox 1.5). Va trebui sa executi o parte din acesti pasi numai o data. Firefox te va intoarce la aceste optini data viitoare cand revii pe aceasta cale. In meniul Firefox, selecteaza Tools, Options..., de-a lungul partii superioare, selecteaza Privacy. Din randul de butoane, selecteaza Cookies. Catre partea din stanga-jos, da click pe butonul pe care scrie View Cookies („vizualizeaza cookie-uri”). Iti va aparea o lista de cookie-uri stocate in computer. Dupa ce termini acest tutorial despre cookie-uri, ar trebui sa ti se aloce un cookie pentru gazda locala a site-ului, pe care o poti deschide si vizualiza.

Firefox iti faciliteaza de asemenea stergerea cookie-urilor, astfel incat sa iti poti crea din nou cookie-ul dupa ce ai operat modificarile in program.

Vizualizarea fisierelor cookie cu Internet Explorer

Pentru a-ti vedea fisierele cookie in Microsoft Internet Explorer, lanseaza explorerul de fisiere Windows. Gaseste C:\Documents and Settings\YourUserName\Cookies. Sorteaza fisierele din acest director dupa Date Modified  (data modificarii) pentru a gasi cookie-ul cu care lucrezi in acel moment. Ar trebui sa vezi un fisier cookie cu numele sub forma "yourname@localhost.txt" Da dublu click pe numele fisierului pentru a-l deschide si pentru a vizualiza continutul. Este posibil sa ai nevoie sa deschizi dispozitivul de aranjare automata a cuvintelor (Format | Word Wrap) in Notepad sau in editorul tau predefinit de text.

Salvarea unui cookie

Foloseste functia Javascript setCookie pentru a crea un cookie si pentru a salva o valoare in acel cookie. Asigneaza-i trei elemente: name, value si expires- nume, valoare si „expira.”

Numele- name – reprezinta numele cookie-ului pe care tocmai ce l-ai configurat. Il vom folosi si in momentul in care vom recupera cookie-ul.

Valoarea (value) este informatia pe care doresti sa ti-o salveze cookie-ul. Cookie-urile nu accepta spatii, semne grafice de punct- si- virgula, sau virgula, asa ca folosim functia escape(value) pentru a codifica valoarea. Vom da  “un-escape” valorii la recuperarea (extragerea) cookie-ului. Expires desemneaza momentul expirarii unui cookie (cand acesta este sters din computerul utilizatorului). Este un parametru optional. Daca nu este folosit, cookie-ul expira atunci cand utilizatorul iese.

Data expirarii reprezinta singura parte dificila. Vom crea un nou obiect Date. Data expirarii este stocata in milisecunde. O data de expirare de x zile in viitor necesita convertirea celor x zile in milisecunde, pentru a le putea aduna.
Constituirea unei functii setCookie de baza este destul de simpla.

<script language="JavaScript">
function setCookie(name, value, expires) { 
    document.cookie = name + "=" + escape(value) + 
    "; path=/" + ((expires == null) ? "" : "; expires=" + 
    expires.toGMTString()); 
}

Acum, fa noul obiect Date si seteaza-l pentru 30 de zile de la momentul curent:

var exp = new Date();     
//set new date object 
exp.setTime(exp.getTime() + (1000 * 60 * 60 * 24 * 30));     
//set it 30 days ahead

Nu uita sa inchizi eticheta secventei de instructiuni:

</script>

Pentru a putea vedea cum functioneaza, sa ne configuram cookie-ul cu un buton.
Tot ce facem este sa configuram un cookie cu numele myCookie si cu valoarea it is crunchy Aici este HTML-ul pentru buton si pentru configurarea cookie-ului:

<form>
    <input type="button" value="Set a Cookie" 
    onClick="setCookie('myCookie','it is crunchy', exp)">
</form>

Ia aminte: eticheta input este un rand.

Recuperarea unui cookie

Codul cu care extragem un cookie este putin mai complicat, pentru ca trebuie sa dai scroll prin toate cookie-urile pentru a-l gasi pe al tau. Aici se afla functia JavaScript getCookie:

<script language="JavaScript"> 
 
function getCookie (name) { 
    var dc = document.cookie; 
    var cname = name + "="; 
    if (dc.length > 0) { 
      begin = dc.indexOf(cname); 
      if (begin != -1) { 
        begin += cname.length; 
        end = dc.indexOf("", begin);
        if (end == -1) end = dc.length;
        return unescape(dc.substring(begin, end));
        } 
      } 
    return null; 
}
</script>

Sa recuperam cookie-ul pe care tocmai l-am configurat si sa afisam valoarea intr-o casuta de text. HTML-ul necesar pentru a extrage valoarea lui myCookie (cookie-ul pe care tocmai ce l-am configurat) este:

<form>
    <input type="button" value="Get Cookie Value" 
    onClick="this.form.tf.value = getCookie('myCookie')">
    <input type="text" name="tf" size="30">
</form>

Stergerea unui cookie

Pentru a inlatura sau pentru a sterga un cookie, ii poti seta data expirarii pe now, („acum”), sau pe 0. De asemenea, poti folosi o functie pentru a sterge cookie-ul.

<script language="JavaScript">
// This function deletes a cookie 
function delCookie(name) { 
    document.cookie = name + "=; expires=Thu, 01-Jan-70 
    00:00:01 GMT" + "; path=/"; 
} 
</script>

Apoi, cand vrei sa stergi cookie-ul, foloseste:

delCookie("myCookie");

Sa ne asiguram ca cookie-ul nostru este aici (daca nu, intoarce-te si configureaza-l):

Acum, sa stergem acest cookie cu un buton.
Acum sa incercam din nou butonul de obtinere a valorii cookie-ului-“get cookie value” si sa vedem daca cookie-ul este acolo. Campul formularului ar trebui sa fie gol daca folosesti Firefox (nu poate gasi cookie-ul pe care il cauta) sau returneza “null” (MS Internet Explorer). De asemenea, iti poti folosi browserul pentru a vedea daca cookie-ul nostru se afla acolo (gasesti instructiuni in Vedere de ansamblu asupra cookie-urilor).

Cookie-uri: Clarificare si sinteza

Tutorialul nostru despre cookie-uri a folosit formulare  JavaScript si HTML pentru a crea  si pentru a lucra cu un fisier cookie. In practica, ti-ai apela functiile cookie atunci cand pagina este incarcata.
Functiile cookie ale JavaScript in partea de sus a fisierului tau, precum in paginile anterioare ale acestui tutorial. Dupa eticheta ta HTML BODY , apeleaza functia cookie adecvata.

Salvarea unui Cookie

Salveaza-ti cookie-ul cu o secventa de instructiuni precum cea de mai jos:

<script language="JavaScript">
//create new date object 
var exp = new Date(); 
exp.setTime(exp.getTime() + (1000 * 60 * 60 * 24 * 30));     
//set it 30 days ahead 
setCookie("myCookie","it is crunchy", exp);     
//save the cookie 
</script>

Recuperarea cookie-ului

Recupereaza cookie-ul cu cod, astfel:

<script language="JavaScript">
getCookie("myCookie");
</script>

Pentru depanare, poti extrage cookie-ul in browserul tau:

<script language="JavaScript">
document.write(getCookie("myCookie"));
</script>

Stergerea cookie-ului

Sterge cookie-ul cu secventa de program, astfel:

<script language="JavaScript">
delCookie("myCookie");
</script>

Sumar al folosirii JavaScript pentru a salva, recupera si sterge un cookie
Iata, asta este tot. Nu a fost cel mai spectaculos exemplu de utilizare a unui cookie, insa este menit sa te initieze. Asimileaza mai intai bazele lucrului cu cookie-uri, iar apoi poti dezvolta de aici si folosi cookie-urile i moduri mai sofisticate si mai inovative. Distreaza-te, si sper ca te va ajuta.

• XII. Link-uri si ferestre noi in JavaScript
• VII. Protejarea unei pagini cu o parola
• VIII. Mesaje de confirmare
• Reflexii pentru imagini
• URLencode si URLdecode cu JavaScript