Utilizare Cookie in JS

Curs Javascript

• Preluare valoare din cookie
• Creare cookie
• Stergere cookie
• Exemplu complet utilizare cookie

Valorile majoritatii variabilelor dintr-un script dispar atunci cand fereastra navigatorului este inchisa. Spre deosebire de acestea, valorile variabilelor cookie se pot pastra un timp indefinit. Pentru ca valorile lor sa se poata pastra, browserul utilizatorului stocheaza variabilele cookie in calculatorul utilizatorului.
Astfel, cookie-urile sunt fisiere care contin date din site salvate pe calculatorul vizitatorului.

Despre cookie

Un cookie consta in principal dintr-o pereche nume=valoare, iar caracteristici mai avansate permit stabilirea unei date de expirare si pot preciza ce pagini web vad informatia cookie.
Un fisier cookie poate persista luni de zile, sau ani (daca nu e sters), simplificand vizitele ulterioare ale utilizatorului pe site, daca informatii referitoare la vizite si preferintele utilizatorului sunt salvate si preluate din cookie de fiecare data cand va reveni la site.
JavaScript are functii pentru citirea, adaugarea si editarea fisierelor cookie.

Dezavantaje cookie

- Numarul total de cookie-uri pentru un server sau domeniu este de 200.
- Marimea maxima a unui fisier cookie este 4 kb.

Preluare valoare din cookie

Numele si valorile dintr-un cookie sunt stocate si stabilite utilizand proprietatea cookie a obiectului document.
Pentru a prelua sirul cookie intr-o variabila se foloseste o instructiune ca aceasta:

<h4>Exemplu document.cookie</h4>
<p>La click pe buton se afiseaza la #resp sirul returnat de <em>document.cookie</em>.</p>
<button id='btn1'>Cookie</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = document.cookie;
});
</script>

Perechile nume=valoare sunt separate prin caracterul punct si virgula ";" si un spatiu, iar ultima pereche nu are caracterul punct si virgula.

function getCookie(name){
 var re ='';
 var str_c =' '+ document.cookie +';'; //pune sirul de cookie intre un spatiu si ;
 var name =' '+ name +'='; //sa caute ce e intre name si =
 var start_c = str_c.indexOf(name); //unde incepe name
 var end_c;
 if(start_c != -1) { // daca exista numele transmis
 start_c += name.length; // unde incepe valoarea
 end_c = str_c.indexOf(';', start_c); //unde se termina valoarea
 re = decodeURIComponent(str_c.substring(start_c, end_c)); //valoarea
 }
 return re;
}

var val_c = GetCookie('nume_cookie');
document.write(val_c); // Afiseaza valoarea cookie-ului cautat, sau sir gol ''

Creare cookie

Perechea nume=valoare este informatia minima de care aveti nevoie pentru a defini un cookie, dar se pot adauga si alti parametri.
Iata o lista de parametrii ce pot fi utilizati pentru a seta un cookie:

var val_c ='value';
document.cookie ='some_name='+ encodeURIComponent(val_c);

var one_week = 7*24*60*60*1000; //Data de expirare o saptamana in milisecunde
var exp_dt = new Date();
exp_dt.setTime(exp_dt.getTime() + one_week);
document.cookie ='food=fruits; expires='+ exp_dt.toGMTString();

var one_week = 7*24*60*60; //Valabil o saptamana in secunde
document.cookie ='food=fruits; max-age='+ one_week;

//cookie-ul 'food' e disponibil in toate paginile din directorul '/blog' (inclusiv subdirectoare)
document.cookie ='food=fruits; path=/blog';

//cookie-ul 'color' e disponibil in toate paginile din directorul 'javascript/test' (inclusiv subdirectoare)
document.cookie ='color=blue; path=/javascript/test';

//cookie-ul 'food' e disponibil in toate paginile din site-ul marplo.net (inclusiv in subdomenii)
document.cookie ='food=fruits; path=/; domain=marplo.net';

//cookie-ul 'color' e disponibil numai in paginile din subdomeniu 'bfie.marplo.net/'
document.cookie ='color=blue; path=/; domain=bfie.marplo.net';

var one_week = 7*24*60*60; //Valabil o saptamana in secunde
document.cookie ='food=fruits; path=/; secure; max-age='+ one_week;

Functie pentru creare cookie

function setCookie(name, value, maxage, path){
 var maxage =(!maxage) ? '' :'; max-age='+ maxage;
 var path =(!path) ? '' :'; path=' + path;
 document.cookie = name + '='+ encodeURIComponent(value) + maxage + path;
}

//creaza un cookie valabil o saptamana in tot site-ul
var m_age = 7*24*60*60;
setCookie('un_nume', 'o-valoare', m_age, '/');

Un alt mod de a salva date in browser-ul utilizatorului pe timp nelimitat e cu metoda localStorage.
- Vedeti: marplo.net/javascript/windows.html#hshsb

Stergere cookie

Pentru a sterge un cookie, numele si calea (daca a fost specificat parametrul "path") trebuie sa fie aceleasi cu numele si calea folosite la crearea lui.
Stergerea unui cookie se face prin stabilirea datei de expirare ('expires') la un moment in trecut, sau definirea unei valori negetive (cu minus) la 'max-age'.
- Pentru stergere cookie puteti folosi functia delCookie() din acest cod.

//sterge cookie-ul name adaugand valoare negativa la 'max-age'
//path e necesar doar daca a fost folosit la crearea cookie-ului
function delCookie(name, path){
 var path =(!path) ? '' :'; path=' + path;
 var two_d = 2*24*60*60; //doua zile in secunde 
 document.cookie = name + "=bye; max-age=-" + two_d + path; 
}

Exemplu complet utilizare cookie

Pentru a intelege mai bine cum puteti crea si folosi fisierele cookie, studiati exemplul urmator.
Exemplu foloseste functii de creare, citire si stergere cookie prezentate in acest tutorial.
Scopul acestui exemplu este de a intelege cum functioneaza fisierele cookie. Intr-o parte sunt casete input pentru scrierea unor preferinte care vor fi trimise la scriptul JS pentru inregistrarea lor in cookie. In alta coloana sunt doua butoane, unul pentru afisarea preferintelor inregistrate in cookie; al doilea buton pentru a sterge acele date din cookie.
- Codul complet este urmatorul, dati clic pe butonul de jos ca sa-l testati:

<style>
#add_fav, #show_fav {
display:inline-block;
font-size:18px;
margin:5px 8px;
padding:4px 5px;
}
#add_fav {
background:#dee0fe;
width:350px;
}
#show_fav {
border:1px solid #000;
background:#b0eeb0;
vertical-align:top;
width:250px;
}
#show_fav em {
font-weight:700;
}
#set_c {
display:block;
margin:8px auto;
}
</style>

<h4>Exemplu script JavaScript cu cookie</h4>
<p>Adaugati in urmatoarele casete de text preferintele dv. apoi apasati butonul "Save Favorite", acesta apeleaza functia setCookie() care va prelua datele adaugate si le va stoca in cookie care vor fi valabile 5 zile de la crearea lor.<br>
Dati clic pe butonul "Afiseaza Favorite", acesta afiseaza preferintele preluate din cookie cu functia getCookie().<br>
 - Daca inchideti aceasta fereastra de test si o deschideti din nou, la click pe "Afiseaza Favorite" vor fi afisate datele adaugate inainte.<br><br>
Daca apasati butonul "Sterge cookie", va apela functia delCookie() care sterge preferintele salvate.<br>
La urmatoarea apasare pe "Afiseaza Favorite" nu va afisa nimic deoarece datele au fost stere din cookie.</p>
<div id='add_fav'>
Culoare favorita: <input type='text' id='culoare' maxlength='40' /><br>
Fructe preferate: <input type='text' id='fructe' maxlength='40' /><br>
Citat favorit: <input type='text' id='citat' size='35' maxlength='80' /><br>
 <em id='resp'></em>
<button id='set_c'>Save Favorite</button> <em id='resp'></em>
</div>
<div id='show_fav'>
<button id='get_c'>Afiseaza Favorite</button> &nbsp; 
<button id='del_c'>Sterge cookie</button>
<div>
Culoare favorita: <em id='c_culoare'></em><br>
Fructe preferate: <em id='c_fructe'></em><br>
Citat favorit: <em id='c_citat'></em>
</div>
</div>

<script>
//seteaza cookie name cu valoarea value (valabil 5 zile in tot site-ul)
function setCookie(name, value, maxage, path){
 var maxage = 5*24*60*60; //5 zile in secunde
 document.cookie = name + '='+ encodeURIComponent(value)+'; max-age='+ maxage +'; path=/';
}

//returneaza valoarea cookie-ului name, sau sir gol
function getCookie(name){
 var re ='';
 var str_c =' '+ document.cookie +';'; //pune sirul de cookie intre un spatiu si ;
 var name =' '+ name +'='; //sa caute ce e intre name si =
 var start_c = str_c.indexOf(name); //unde incepe name
 var end_c;
 if(start_c != -1) { // daca exista numele transmis
 start_c += name.length; // unde incepe valoarea
 end_c = str_c.indexOf(';', start_c); //unde se termina valoarea
 re = decodeURIComponent(str_c.substring(start_c, end_c)); //valoarea
 }
 return re;
}

//sterge cookie-ul name
function delCookie(name){ 
 var two_d = 2*24*60*60*1000; //doua zile in secunde
 document.cookie = name + '=bye; path=/; max-age=-'+ two_d; 
}

//array cu numele pt. cookie (acelasi cu id-ul input-urilor)
var arr_co =['culoare', 'fructe', 'citat'];

//la clic pe #set_c salveaza datele in cookie
document.getElementById('set_c').addEventListener('click', (ev)=>{
 for(var i=0; i<arr_co.length; i++) setCookie(arr_co[i], document.getElementById(arr_co[i]).value);
 document.getElementById('resp').textContent ='- Date salvate';
});

//la clic pe #get_c afiseaza datele din cookie
document.getElementById('get_c').addEventListener('click', (ev)=>{
 for(var i=0; i<arr_co.length; i++) document.getElementById('c_'+arr_co[i]).textContent = getCookie(arr_co[i]);
});

//la clic pe #del_c sterge datele din cookie
document.getElementById('del_c').addEventListener('click', (ev)=>{
 for(var i=0; i<arr_co.length; i++){
 delCookie(arr_co[i]);
 document.getElementById('c_'+arr_co[i]).textContent ='';
 }
});
</script>