Šta je HTML kolačić?

Kolačić (eng. cookie) je mali fajl sa informacijama koji web sajt čuva na računaru korisnika putem pretraživača. Njegova svrha je da sajt "zapamti" korisnika i prilagodi sadržaj prema njegovim potrebama. Na primer, kolačići se koriste za:

  • Pamćenje korisničke prijave (da ne morate svaki put unositi korisničko ime i šifru).
  • Čuvanje podešavanja, poput izabranog jezika sajta.
  • Praćenje stavki u korpi za kupovinu na online prodavnici.

U suštini, kolačići omogućavaju sajtu da "pamti" informacije između korisnikovih poseta.

Primer kako radi kolačić:
  1. Kada posetite sajt i prijavite se, sajt šalje kolačić vašem pretraživaču.
  2. Pretraživač čuva taj kolačić na vašem računaru.
  3. Sledeći put kada posetite isti sajt, pretraživač šalje kolačić nazad sajtu kako bi vas prepoznao.

Uprošćeno:

HTML kolačić je mali fajl koji sajt može da sačuva na računaru korisnika kako bi zapamtio informacije, poput prijave, preferencija jezika ili stavki u korpi za kupovinu.

Zamislite kolačić kao ceduljicu koju sajt ostavi u vašem pretraživaču, da se seti šta ste radili kad se sledeći put vratite.

Ima ih raznih - kolačići se mogu podeliti prema nekoliko kriterijuma od kojih su najvažniji:

  • Privremeni kolačići (Session Cookies):

    • Traju samo dok je otvoren pretraživač.
    • Kada korisnik zatvori pretraživač, ovi kolačići se automatski brišu.
    • Koriste se, na primer, za sve što ne treba čuvati duže od trenutnog korišćenja sajta.
    • Ne mora im se postavljati expires ili max-age.

  • Trajni kolačići (Persistent Cookies):

    • Ostaju sačuvani i nakon zatvaranja pretraživača, sve dok ne isteknu ili ih korisnik ručno ne obriše.
    • Rok isteka se podešava opcijom expires (datum) ili max-age (sekunde).
    • Koriste se za čuvanje dugoročnih podataka, poput podešavanja jezika ili preferencija korisnika.

    Ako se ne postavi expires ili max-age:

    • Kolačić će biti privremen i biće obrisan zatvaranjem pretraživača.

  • Neophodni kolačići (Essential Cookies):

    • Omogućavaju osnovne funkcionalnosti sajta, kao što su navigacija i pristup zaštićenim delovima.
    • Bez ovih kolačića, sajt ne može pravilno funkcionisati.

  • Funkcionalni kolačići (Functional Cookies):

    • Pamte korisničke izbore, npr. jezik sajta, temu ili zapamćene stavke u korpi za kupovinu.

  • Kolačići za performanse (Performance Cookies):

    • Služe za prikupljanje anonimnih podataka o tome kako korisnici koriste sajt.
    • Na primer, beleže koje stranice se najviše posećuju kako bi se sajt optimizovao.

  • Marketinški kolačići (Marketing Cookies):

    • Prate ponašanje korisnika na internetu radi prikazivanja personalizovanih reklama.
    • Najčešće ih koriste oglašivačke mreže.

  • Analitički kolačići (Analytics Cookies):

    • Prikupljaju informacije o ponašanju korisnika na sajtu radi unapređenja iskustva.
    • Primer: Google Analytics kolačići.

  • Prvi kolačići (First-party Cookies):

    • Postavlja ih sajt koji korisnik posećuje.
    • Koriste se za osnovne funkcije sajta, kao što su prijava i podešavanja korisnika.

  • Kolačići treće strane (Third-party Cookies):

    • Postavljaju ih drugi sajtovi ili servisi (npr. oglašivači ili alati za analitiku).
    • Koriste se za praćenje korisnika između različitih sajtova radi ciljanog oglašavanja.

Kolačići su mali tekstualni fajlovi koji:

  • Čuvaju podatke u parovima ključ-vrednost (npr. korisnik=Marko).
  • Mogu se podesiti sa opcijama kao što su datum isteka (expires), domen (domain) i putanja (path).

Praktično:

1. Kreiranje kolačića
 

Kolačić se kreira u JavaScript-u tako što se dodeljuje vrednost promenljivoj document.cookie.

 
document.cookie = "korisnik=Marko; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";

  • korisnik=Marko – ime kolačića je korisnik, a vrednost Marko.
  • expires – vreme do kada kolačić važi (ovde do 31. decembra 2024.) – opciono ...
  • path – lokacija na kojoj kolačić važi (ako je /, važi za ceo sajt) – opciono ...

Ako se ne postavi datum isteka, kolačić će trajati samo dok je otvoren korisnikov pretraživač. Ako se ne postavi putanja, onda će važiti samo na toj web stranici.

2. Čitanje kolačića

Da bi se pročitale vrednosti sačuvanih kolačića, koristi se document.cookie, koji vraća sve kolačiće kao jedan string.

console.log(document.cookie); 
// izlaz: "korisnik=Marko"

Ako ima više kolačića, oni su odvojeni tačka-zarezom.

korisnik=Marko; language=sr;

3. Brisanje kolačića

Kolačić se briše tako što mu se postavi datum isteka u prošlost.

document.cookie = "korisnik=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
(Druga opcija je da se unese kolačić sa istim imenom, ali mu se postavi jako kratak max-age, pa će jako brzo i da nestane)
PAŽNJA: Svaki kolačić je odvojen tačkom i zarezom, pa je neophodno da ručno izdvojite željeni kolačić ako ih ima više (ovo je postavljeno na kraju lekcije)....

Kompletan primer

U sledećem primeru kreiramo, čitamo i brišemo kolačiće (najjednostavniji način).

<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="UTF-8">
<title>Kolačići Primer</title>
</head>
<body> 
   <h1>Rad sa kolačićima</h1>
   <button onclick="kreirajKolacic()">Kreiraj kolačić</button>
   <button onclick="prikaziKolacice()">Prikaži kolačiće</button>
   <button onclick="obrisiKolacic()">Obriši kolačić</button>

<script>
   function kreirajKolacic() {
      document.cookie = "korisnik=Marko; expires=Fri, 15 Dec 2024 12:00:00 UTC; path=/";
      alert("Kolačić kreiran!");
   }

   function prikaziKolacice() {
      alert("Trenutni kolačići: " + document.cookie);
   }

   function obrisiKolacic() {
      document.cookie = "korisnik=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
      alert("Kolačić obrisan!"); 
   }
 </script>
</body>
</html>

Zadatak 1:

Proširiti ovaj primer tako što će se dodati polje za unos imena korisnika...

Kako se dodaje labela i input polje:

<label>
  Unesi ime: <input type="text" id="ime">
</label>

Funkcija kreirajKolacic()

function kreirajKolacic()
{
  let ime = document.getElementById("ime").value;
  document.cookie = "korisnik="+ime+";max-age=5;" ;
  alert("kolacic je kreiran");
}

Zadatak 2:

Proširiti ovaj primer tako što će se, nakon horizontalne crte, postaviti:

  • polja za unos: imena kolačića, vrednosti kolačića i broja sekundi koliko će kolačić da traje,
  • dugme za unos kolačića,
  • dugme za prikaz svih kolačića,
  • dugme za brisanje kolačića sa navedenim imenom.

Smernice za rad: koristiti max-age za trajanje kolačića u sekundama, a za pronalaženje kolačića sa nevedenim imenom pogledjte dodatak na kraju lekcije.

- skica kako bi to trebalo da izgleda -

<label>
  Naziv kolačića: <input type="text" id="naziv">
</label>
<label>
  Vrednost kolačića: <input type="text" id="vrednost">
</label>
<label>
  Koliko traje: <input type="number" id="traje">
</label>

<button onclick="xyz()"> Dodaj </button>
A kako izgleda funkcija:
function xyz()
{
  let naziv = document.getElementById("naziv").value;
  let vrednost = document.getElementById("vrednost").value;
  let traje = document.getElementById("traje").value;

  document.cookie = naziv + "=" + vrednost + ";max-age=" + traje + ";"  ;

  alert("kolacic je kreiran");
}

U cilju vežbe iza    je prikazano malo drugačije rešenje prvog zadatka (- za proučavanje kod kuće -)

    <h1>Rad sa kolačićima</h1>
    <form>
        <label>
            Unesite ime: <input type="text" id="ime">
        </label>       
        <button type="button" onclick="postaviKolacic()">Sačuvaj ime</button>
        <button type="button" onclick="prikaziKolacic()">Prikaži ime</button>
        <button type="button" onclick="obrisiKolacic()">Obriši ime</button>
    </form>

        // Funkcija za postavljanje kolačića
        function postaviKolacic() {
            const ime = document.getElementById("ime").value; // Preuzimanje unetog imena
            document.cookie = "korisnik=" + ime + ";"; // Kreiranje kolačića
            alert("Kolačić je sačuvan!");
        }

        // Funkcija za čitanje kolačića
        function prikaziKolacic() {
            const kolacici = document.cookie; // Svi kolačići kao string
            if (kolacici.includes("korisnik=")) {
                const korisnik = kolacici.split("=")[1]; // Ekstrakcija vrednosti
                alert("Sačuvano ime je: " + korisnik);
            } else {
                alert("Kolačić nije postavljen.");
            }
        }

        // Funkcija za brisanje kolačića
        function obrisiKolacic() {
            document.cookie = "korisnik=; expires=Thu, 01 Jan 1970 00:00:00 UTC;"; // Brisanje
            alert("Kolačić je obrisan!");
        }

DODATAK: Kako pronaći određeni kolačić, a naročito ako ih ima više

Svaki kolačić je odvojen tačkom i zarezom, pa je neophodno da ručno izdvojite željeni kolačić.

function nadjiKolacic(ime) {
    const kolacici = document.cookie; // Svi kolačići kao jedan string
    const NizKolacica = kolacici.split(';'); // Razdvaja kolačiće po ;
    
    for (let i = 0; i < NizKolacica.length; i++) {
        let kolacic = NizKolacica[i].trim(); // Uklanja razmake
        if (kolacic.startsWith(ime + '=')) { // Traži kolačić sa datim imenom
            return kolacic.substring(ime.length + 1); // Vraća vrednost kolačića
        }
    }
    return null; // Ako kolačić nije pronađen
}

Objašnjenje:

  1. document.cookie: string koji sadrži sve kolačiće postavljene na stranici. Kolačići su u formi ime=vrednost i odvojeni su sa tačkom-zarezom (;).

  2. split(';'): Deli string u niz kolačića na osnovu tačke-zareza, pa dobijamo niz kolačića koji se može obraditi jedan po jedan.

  3. trim(): Uklanja eventualne praznine sa početka i kraja svakog kolačića, jer kolačići mogu biti zapisani sa razmacima.

  4. startsWith(ime + '='): Proverava da li kolačić počinje sa željenim imenom. Na primer, ako tražimo kolačić sa imenom "korisnik", proverava da li kolačić počinje sa "korisnik=".

  5. substring(ime.length + 1): Ako je kolačić pronađen, uzima vrednost kolačića (sve što se nalazi posle znaka =).

  6. return null: Ako kolačić nije pronađen, funkcija vraća null.

Kako koristiti ovu funkciju?

Ako želite da pronađete kolačić sa imenom "korisnik", možete pozvati funkciju ovako:

const imeKorisnika = nadjiKolacic("korisnik");
if (imeKorisnika) {
    alert("Korisnik je: " + imeKorisnika);
} else {
    alert("Kolačić 'korisnik' nije pronađen.");
}

Last modified: Friday, 12 December 2025, 9:59 AM