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

Fisierele cookie au si unele dezavantaje:
1. Fiind stocate pe calculatorul utilizatorului, acestea poat fi sterse din gresela (sau intentionat).
2. Browserul impune restrictii privind dimensiunea si numarul de fisiere cookie care pot fi stocate, iar fisierele cookie mai noi le pot suprascrie pe cele vechi.
Daca aceste limite sunt depasite, browserul va sterge cele mai vechi cookie-uri si nefolosite.
- Numarul total de cookie-uri pentru un server sau domeniu este de 200.
- Marimea maxima a unui fisier cookie este 4 kb.
3. Cand un utilizator trece de la un browser la altul, fisierele cookie salvate de un browser nu sunt recunoscute de celalalt.
4. Daca mai multi utilizatori folosesc acelasi calculator si acelasi browser ei pot folosi fisiere cookie care apartin altcuiva.
5. Informatiile private precum parole, numere personale nu trebuie stocate direct intr-un cookie deoarece fisierele cookie pot fi citite si de alte programe.
6. Utilizatorul poate configura browserul sa interzica anexarea de cookie, in acest caz aplicatia care foloseste cookie ar putea sa nu functioneze.

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:

var myCookie = document.cookie;

document.cookie returneaza un sir cu toate cookie-urile valabile in acea pagina. Un sir ca acesta:
nume1=valoare1; nume2=valoare2; nume3=valoare3
Unde 'nume1', 'nume2', 'nume3' reprezinta numele fiecarui cookie, iar 'valoare1', 'valoare2', 'valoare3' reprezinta valorile stocate in fiecare cookie.

- Exemplu:
<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.


Pentru extragerea si utilizarea valorilor din fisierele cookie, trebuie sa prelucrati in JavaScript sirul obtinut cu: document.cookie.
Pentru a simplifica preluarea valorii unui cookie, puteti folosi functia getCookie() din urmatorul cod JS:
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:

nume=valoare - numele si valoarea salvata in cookie (numele sa contina doar litere, numere, _ ). - Exemplu:
var val_c ='value';
document.cookie ='some_name='+ encodeURIComponent(val_c);
- Se aplica functia encodeURIComponent() la valorea adaugata in cookie ca sa codeze caractere care fac parte din sintaxa ( =;.).
expires=date - 'date' e un sir cu data si timpul cand cookie-ul va expira si va fi automat sters.
Perioada de expirare trebuie transformata din milisecunde in format: Wdy, DD-Mon-YYYY HH:MM:SS GMT.
Daca nu este specificat nici un timp (expires sau max-age), cookie-ul va dispare la inchiderea browser-ului.
- Exemplu:
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();
- Se aplica functia toGMTString() la obiectul Date ca sa-l transforme in sir cu GMT.
max-age=seconds - se poate folosi in loc de expires, si e mai simplu.
seconds reprezinta durata de existenta a cookie-ului, in secunde.
Daca nu este specificat nici un timp (expires sau max-age), cookie-ul va dispare la inchiderea browser-ului.
- Exemplu:
var one_week = 7*24*60*60; //Valabil o saptamana in secunde
document.cookie ='food=fruits; max-age='+ one_week;
path=path - stabileste paginile din site in care se poate folosi acel cookie.
Daca nu e specificat, cookie-ul poate fi accesat in directorul si subdirectoarele paginii in care e setat.
- Exemplu:
//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';
- Valoarea pentru ca fisierul cookie sa poata fi folosit in toate paginile unui domeniu, din toate directoarele, este calea radacina '/' ( path=/ ).
domain=nume_domeniu - domeniul si subdomeniu in care cookie-ul e accesibil.
Daca nu e specificat, cookie-ul e valabil in domeniul unde e creat.
- Exemplu:
//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';
secure - daca e adaugat, cookie-ul va fi transmis doar la paginile cu adresa cu HTTPS. - Exemplu:
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

In urmatorul exemplu este prezentata o functie utila pentru creare cookie in JavaScript cu parametri necessari.
function setCookie(name, value, maxage, path){
 var maxage =(!maxage) ? '' :'; max-age='+ maxage;
 var path =(!path) ? '' :'; path=' + path;
 document.cookie = name + '='+ encodeURIComponent(value) + maxage + path;
}
- Aceasta functie se poate folosi ca in acest cod:
//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>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
Utilizare Cookie in JS

Last accessed pages

  1. Jokes - Glume, Bancuri, Humor (2) (680)
  2. Scriere scripturi PHP elementare (1576)
  3. Conditional IF in Limba Engleza - Fraze Conditionale (20736)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (6659)
  5. Espanol Chistes - Glume, Bancuri (877)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2144)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1480)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1072)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (1025)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (981)