IT TUTORIJALI | jQuery

JavaScript - Cookies

Šta je cookies (kolačić)?

Kolačić je mala tekstualna datoteka koja vam omogućava da na računaru korisnika pohranite malu količinu podataka (gotovo 4KB). Obično se koriste za praćenje informacija poput korisničkih postavki koje web lokacija može preuzeti kako bi personalizovala stranicu kada korisnik sljedeći put posjeti web stranicu. Kolačići su stari mehanizam za pohranu na strani klijenta koji je izvorno dizajniran za upotrebu skriptnih jezika na strani poslužitelja kao što su: PHP, ASP itd. Međutim, kolačići se takođe mogu kreirati, može im se pristupiti i mijenjati direktno pomoću JavaScript, ali postupak je malo komplikovan i neuredan.

Savjet!

Kolačić može biti do 4KB, uključujući njegovo ime i vrijednosti, kolačići koji premašuju ovu dužinu skraćuju se tako da odgovaraju. Takođe, svaki put kada pretraživač zatraži stranicu od servera, svi podaci u kolačiću automatski se šalju serveru u okviru zahtjeva.

Upozorenje!

Nemojte pohranjivati osjetljive podatke poput lozinke ili podataka o kreditnoj kartici u kolačiće, jer zlonamjeran korisnik njima može manipulisati.

Kreiranja kolačića u JavaScript

U JavaScript možete stvarati, čitati i brisati kolačiće pomoću svojstva document.cookie. Ovo svojstvo predstavlja sve kolačiće povezane s dokumentom. Da biste kreirali ili spremili novi kolačić, svojstvu dodijelite name=value, poput ovog:

document.cookie = "firstName=Milos";

Vrijednost kolačića ne može da sadrži znakove, zarez ili razmak. Iz tog razloga moraćete koristiti ugrađenu JavaScript funkciju encodeURIComponent() za kodiranje vrijednosti koje sadrže ove znakove prije nego što ih pohranite u kolačić. Isto tako, moraćete koristiti odgovarajuću funkciju decodeURIComponent() kada čitate vrijednost kolačića.

document.cookie = "name=" + encodeURIComponent("Milos Mihaljica");

Prema zadanim postavkama, vijek trajanja kolačića je trenutna sesija pretraživača, što znači da se gubi kad korisnik izađe iz pretraživača. Da bi kolačić trajao i dalje od trenutne sesije pretraživača, trebaćete odrediti njegov vijek trajanja (u sekundama) s atributom max-age. Ovaj atribut određuje koliko dugo kolačić može ostati na korisnikovom sistemu prije nego što se izbriše, npr. sljedeći kolačić će živjeti 30 dana.

document.cookie = "firstName=Milos; max-age=" + 30*24*60*60;

Takođe možete odrediti vijek trajanja kolačića s atributom expires. Ovaj atribut uzima tačan datum (u GMT/UTC formatu) kada kolačić treba isteći, a ne pomak u sekundama.

document.cookie = "firstName=Milos; expires=Thu, 31 Dec 2099 23:59:59 GMT";

Evo funkcije koja postavlja kolačić s opcijskim atributom max-age. Takođe možete koristiti istu funkciju za brisanje kolačića dodavanjem vrijednosti 0 za parametar daysToLive.

function setCookie(name, value, daysToLive) {
    // Kodirajte vrijednost kako biste izbjegli znakove, zarez i razmak
    var cookie = name + "=" + encodeURIComponent(value);
    
    if(typeof daysToLive === "number") {
        /* Postavljanje atribut max-age tako da kolačić ističe
         nakon navedenog broja dana */
        cookie += "; max-age=" + (daysToLive*24*60*60);
        
        document.cookie = cookie;
    }
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set i Get kolačići u JavaScript</title>
</head>
<body>
    <script>
    // Prilagođena funkcija za postavljanje kolačića
    function setCookie(name, value, daysToLive) {
        // Kodirajte vrijednost kako biste izbjegli znakova, zarez i razmak
        var cookie = name + "=" + encodeURIComponent(value);
    
        if(typeof daysToLive === "number") {
            /* Postavlja atribut max-age tako da kolačić ističe
             nakon navedenog broja dana*/
            cookie += "; max-age=" + (daysToLive*24*60*60);
    
            document.cookie = cookie;
        }
    }
    
    // Prilagođena funkcija za dobivanje kolačića
    function getCookie(name) {
        // Podijela stringa kolačića i dobijanje pojedinačnih parove name=value u nizu
        var cookieArr = document.cookie.split(";");
    
        // Prelistajte elemente niza
        for(var i = 0; i < cookieArr.length; i++) {
            var cookiePair = cookieArr[i].split("=");
    
            /* Uklanjanje razmaka na početku imena kolačića
             i uporedjivanje sa zadanim stringom */
            if(name == cookiePair[0].trim()) {
                // Dekodiranje vrijednosti kolačića i vraćanje
                return decodeURIComponent(cookiePair[1]);
            }
        }
    
        // Vrati null ako nije pronađena
        return null;
    }
    
    // Prilagođena funkcija za provjeru kolačića
    function checkCookie() {
        // Nabavljanje (Get) kolačiće pomoću naše prilagođene funkcije
        var firstName = getCookie("firstName");
    
        if(firstName != null) {
            alert("Dobrodošao nazad, " + firstName);
        } else {
            firstName = prompt("Unesite svoje ime:");
            if(firstName != "" && firstName != null) {
                // Postavite kolačić pomoću naše prilagođene funkcije
                setCookie("firstName", firstName, 1);
            }
        }
    }
    
    // Provjera kolačića prije učitavanju stranice
    window.onload = checkCookie;

  // Otkomentirajte sljedeći reda da biste izbrisali ovaj kolačić
  // setCookie("firstName", "", 0);
    </script>
    <p><strong>Napomena:</strong> Ako pritisnete dugme "Prikaži 
    izlaz" ili osvježite stranicu, vidjećete pozdravnu poruku ako ste 
    unijeli svoje ime u dijaloški okvir upita. Pogledajte zadnji red 
    JavaScript koda da biste znali kako izbrisati ovaj kolačić<b> firstName </b>.</p>
</body>
</html>

Kolačić je prema zadanim postavkama dostupan na svim web stranicama u istom direktoriju ili bilo kojem poddirektorijumu tog direktorija. Međutim, ako navedete putanju, kolačić je dostupan za sve web stranice u navedenoj putanji i za sve web stranice u svim poddirektorijima te putanje. Na primjer, ako je putanja postavljena na / kolačić je dostupan na čitavoj web lokaciji, bez obzira koja stranica stvara kolačić.

document.cookie = "firstName=Milos; path=/";

Dalje, atribut domene možete koristiti ako želite da kolačić bude dostupan na svim poddomenama. Kolačići su prema zadanim postavkama dostupni samo onim stranicama u domeni u kojoj su postavljeni. Ako kolačić koji je kreirala stranica na blog.example.com postavi svoj atribut path na / i svoj atribut domene na example.com, taj je kolačić dostupan i na svim web stranicama na backend.example.com, portalu.example.com. Međutim, kolačiće ne možete dijeliti izvan domene.

document.cookie = "firstName=Milos; path=/; domain=example.com";

Tu je i logički atribut nazvan secure. Ako je naveden ovaj atribut, kolačić će se prenositi samo putem sigurne (tj. šifrirane (encrypted)) veze kao što je HTTPS.

document.cookie = "firstName=Milos; path=/; domain=example.com; secure";

Čitanje kolačića (Cookie)

Čitanje kolačića je malo složenije, jer svojstvo document.cookie jednostavno vraća string koji sadrži tačku i zarez i listu svih kolačića odvojenih razmakom (tj. parovi name=value, na primjer, firstName = Milos; lastName = Mihaljica;). Ovaj string ne sadrži atribute poput isteka, putanje, domene itd. koji su možda postavljeni za kolačić. Da biste dobili pojedinačni kolačić s ove liste, morate koristiti metodu split() da biste ga podijelili u pojedinačne parove name=value i tražili određeno ime, kao što je prikazano u sljedećem primjeru:

function getCookie(name) {
    // Podijelite string kolačića i dobijte sve pojedinačne parove name=value u nizu
    var cookieArr = document.cookie.split(";");
    
    // Prelistajte elemente niza
    for(var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        
        /* Uklanjanje razmaka na početku imena kolačića
         i uporedite ga sa zadanim nizom */
        if(name == cookiePair[0].trim()) {
            // Dekodirajte vrijednost kolačića i vrati se
            return decodeURIComponent(cookiePair[1]);
        }
    }
    
    // Vrati null ako nije pronađena
    return null;
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Set i Get kolačići u JavaScript</title>
</head>
<body>
    <script>
    // Prilagođena funkcija za postavljanje kolačića
    function setCookie(name, value, daysToLive) {
        // Kodirajte vrijednost kako biste izbjegli znakova, zarez i razmak
        var cookie = name + "=" + encodeURIComponent(value);
    
        if(typeof daysToLive === "number") {
            /* Postavlja atribut max-age tako da kolačić ističe
             nakon navedenog broja dana*/
            cookie += "; max-age=" + (daysToLive*24*60*60);
    
            document.cookie = cookie;
        }
    }
    
    // Prilagođena funkcija za dobivanje kolačića
    function getCookie(name) {
        // Podijela stringa kolačića i dobijanje pojedinačnih parove name=value u nizu
        var cookieArr = document.cookie.split(";");
    
        // Prelistajte elemente niza
        for(var i = 0; i < cookieArr.length; i++) {
            var cookiePair = cookieArr[i].split("=");
    
            /* Uklanjanje razmaka na početku imena kolačića
             i uporedjivanje sa zadanim stringom */
            if(name == cookiePair[0].trim()) {
                // Dekodiranje vrijednosti kolačića i vraćanje
                return decodeURIComponent(cookiePair[1]);
            }
        }
    
        // Vrati null ako nije pronađena
        return null;
    }
    
    // Prilagođena funkcija za provjeru kolačića
    function checkCookie() {
        // Nabavljanje (Get) kolačiće pomoću naše prilagođene funkcije
        var firstName = getCookie("firstName");
    
        if(firstName != null) {
            alert("Dobrodošao nazad, " + firstName);
        } else {
            firstName = prompt("Unesite svoje ime:");
            if(firstName != "" && firstName != null) {
                // Postavite kolačić pomoću naše prilagođene funkcije
                setCookie("firstName", firstName, 1);
            }
        }
    }
    
    // Provjera kolačića prije učitavanju stranice
    window.onload = checkCookie;

  // Otkomentirajte sljedeći reda da biste izbrisali ovaj kolačić
  // setCookie("firstName", "", 0);
    </script>
    <p><strong>Napomena:</strong> Ako pritisnete dugme "Prikaži 
    izlaz" ili osvježite stranicu, vidjećete pozdravnu poruku ako ste 
    unijeli svoje ime u dijaloški okvir upita. Pogledajte zadnji red 
    JavaScript koda da biste znali kako izbrisati ovaj kolačić <b>firstName</b>.</p>
</body>
</html>

Sada ćemo stvoriti još jednu funkciju checkCookie() koja će provjeriti da li je postavljen cookie firstName ili ne, koristeći gornju funkciju getCookie(), a ako je postavljena, ova će funkcija prikazati pozdravnu poruku. Ukoliko se ne prikaže poruka ova funkcija će tražiti od korisnika da unese svoje ime i pohrani ga u kolačić pomoću naše prethodno kreirane funkcije setCookie().

function checkCookie() {
    // Nabavljanje (Get) kolačiće pomoću naše prilagođene funkcije
    var firstName = getCookie("firstName");
    
    if(firstName != "") {
        alert("Dobrodošli nazad, " + firstName);
    } else {
        firstName = prompt("Unesite svoje ime:");
        if(firstName != "" && firstName != null) {
            // Postavljanje kolačić pomoću naše prilagođene funkcije
            setCookie("firstName", firstName, 30);
        }
    }
}

Za ovaj kod primjer je isti kao u prethodnom kodu

Ažuriranje kolačića

Jedini način za ažuriranje ili izmjenu kolačića je stvaranje drugog kolačića s istim imenom i putanjom kao kod postojećeg kolačića. Stvaranje kolačića s istim imenom, ali s drugačijim putem od postojećeg, dodaće dodatni kolačić. Pogledajmo primjer:

// Kreiranje kolačića (cookie)
document.cookie = "firstName=Christopher; path=/; max-age=" + 30*24*60*60;

// Ažuriranje kolačića (cookie)
document.cookie = "firstName=Alexander; path=/; max-age=" + 365*24*60*60;

Brisanje kolačića

Da biste izbrisali kolačić, samo ga postavite još jednom koristeći isto ime, navodeći praznu ili proizvoljnu vrijednost i postavite njegov atribut max-age na 0. Imajte na umu da ako ste naveli putanju i atribut domene za kolačić, vi ćete ih morati uključiti i prilikom brisanja.

// Brisanje kolačića (cookie)
document.cookie = "firstName=; max-age=0";

// Određivanje putanje i domene prilikom brisanja kolačića (cookie)
document.cookie = "firstName=; path=/; domain=example.com; max-age=0";

Međutim, da biste izbrisali kolačić pomoću atributa expires, jednostavno postavite njegovu vrijednost (tj. datum isteka) na datum koji je već prošao, kao što je prikazano u nastavku.

document.cookie = "firstName=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";