WEB Programiranje 3

1. Uvod

Prilikom rada sa web aplikacijama često je potrebno da se određeni podaci zapamte između dva zahteva korisnika. Web je po svojoj prirodi stateless (bez pamćenja stanja) – svaki HTTP zahtev ka serveru je nezavisan i server ne zna ništa o prethodnim aktivnostima korisnika.

Na primer: "korisnik se prijavio na sajt" ili "korisnik je izabrao jezik stranice" ili "korisnik je dodao proizvode u korpu"

Da bi sajt mogao da zapamti ove informacije, koriste se kolačići (cookies).

Kolačić je mala tekstualna informacija koju web sajt čuva u pregledaču korisnika. Kada korisnik ponovo poseti isti sajt, pregledač šalje te informacije nazad serveru ili ih JavaScript može pročitati.

Kolačići se koriste za: 

• pamćenje prijave korisnika
• čuvanje podešavanja (jezik, tema)
• praćenje statistike poseta
• rad korpe u internet prodavnici

U JavaScriptu se kolačići čuvaju i čitaju preko objekta document.cookie.

Pogledajte još jednom kako se radi:

2. Kreiranje kolačića

document.cookie = "ime=Petar";

ime = Petar

console.log(document.cookie);

ime=Petar

let datum = new Date();
datum.setTime(datum.getTime() + (24 * 60 * 60 * 1000));

document.cookie = "korisnik=Marko; expires=" + datum.toUTCString();

document.cookie = "grad=NoviSad; path=/";

3. Čitanje kolačića

document.cookie

console.log(document.cookie);

ime=Petar; grad=NoviSad; tema=dark

function procitajCookie(ime) {

    let kolačići = document.cookie.split(";");

    for(let i = 0; i < kolačići.length; i++) {

        let c = kolačići[i].trim();

        if(c.indexOf(ime + "=") == 0) {
            return c.substring(ime.length + 1);
        }
    }

    return "";
}

let korisnik = procitajCookie("korisnik");

console.log(korisnik);

Marko

4. Brisanje kolačića

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

5. Primer – pamćenje korisničkog imena

<input type="text" id="ime">
<button onclick="sacuvaj()">Sačuvaj ime</button>
<button onclick="ucitaj()">Prikaži ime</button>

<p id="rezultat"></p>

function sacuvaj(){

    let ime = document.getElementById("ime").value;

    document.cookie = "korisnik=" + ime + "; path=/";
}

function ucitaj(){

    let korisnik = procitajCookie("korisnik");

    document.getElementById("rezultat").innerHTML = korisnik;
}

6. Prednosti i ograničenja kolačića

7. Zadaci za vežbu

Zadatak 1: Napraviti kolačić koji čuva: jezik = sr Rešenje

document.cookie = "jezik=sr; path=/";

Zadatak 2:  Kreirati kolačić koji čuva: tema = dark  i važi 7 dana. Rešenje

let d = new Date();
d.setTime(d.getTime() + (7*24*60*60*1000));

document.cookie = "tema=dark; expires=" + d.toUTCString() + "; path=/";

Zadatak 3:  Napisati funkciju koja čita kolačić jezik. Rešenje

function procitajJezik(){

    let cookies = document.cookie.split(";");

    for(let i=0;i<cookies.length;i++){

        let c = cookies[i].trim();

        if(c.indexOf("jezik=") == 0){
            return c.substring(6);
        }
    }

    return "";
}

Zadatak 4: Obrisati kolačić tema. Rešenje

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

8. Dodatni zadaci za rad kod kuće (bez rešenja)

Zadatak 1:

Napraviti stranicu koja ima: input za unos imena korisnika, dugme Sačuvaj. Klikom na dugme ime se čuva u kolačiću imeKorisnika.

Zadatak 2: Napraviti dugme Prikaži ime koje iz kolačića čita ime korisnika i prikazuje ga na stranici.

Zadatak 3: Napraviti dugme Obriši ime koje briše kolačić.

Zadatak 4:

Napraviti stranicu koja pamti omiljenu boju korisnika pomoću kolačića i prilikom ponovnog učitavanja stranice postavlja pozadinu te boje.

Zadatak 5 (napredni):  Napraviti kolačić brojPoseta koji broji koliko puta je korisnik otvorio stranicu.

Primer rezultata:

Posetili ste ovu stranicu 5 puta.

9. Zaključak

Kolačići su jedan od osnovnih mehanizama za pamćenje podataka u web aplikacijama. Oni omogućavaju da se informacije čuvaju u pregledaču korisnika i koriste prilikom narednih poseta sajtu. U JavaScriptu se kolačići kreiraju, čitaju i brišu pomoću objekta document.cookie. Iako imaju određena ograničenja, i dalje predstavljaju važan deo web programiranja i koriste se u velikom broju modernih web aplikacija.

...