Načrtovanje in razvoj spletnih aplikacij

JavaScript: Piškotki (angl. Cookies)

Piškotki (angl. Cookies) so podatki, ki jih hrani spletni brskalnik v majhnih tekstovnih datotekah.

Z Javascriptom lahko kreiramo, spreminjamo in sprejemamo vrednosti piškotkov. V piškotek lahko shranimo ime uporabnika, geslo, kdaj je uporabnik nazadnje obiskal naš portal, katere podatke je vnašal v obrazce, katere informacije ga zanimajo, kaj si je naročil v spletni trgovini...

Ko brskalnik od strežnika zahteva novo stran, poleg zahtevka pošlje tudi vse pripadajoče še veljavne piškotke. Strežnik se na podlagi vrednosti teh piškotkov odloči, kako ukrepati in kaj vrniti. Poleg nove strani lahko strežnik pošlje tudi nove piškotke ali nove vrednosti za že obstoječe piškotke. V vsakem primeru pa novemu dokumentu nastavi lastnost document.cookie, tako da vsebuje imena in vrednosti vseh prejetih piškotkov.

Če delamo lokalno (brez strežnika), vlogo strežnika prevzame kar spletni brskalnik. Ko mu pošljemo zahtevek po novi strani, to stran prikaže, poleg pa nastavi tudi lastnost document.cookie.

Pri uporabi piškotkov lahko pride do težav, zato je potrebno dobro premisliti ali naj jih uporabimo:

  • uporabnik lahko v svojem brskalniku izklopi možnost dela s piškotki, nastavitev piškotka v takem brskalniku nima nobenega učinka;
  • brskalniki imajo običajno omejen prostor za shranjevanje piškotkov, poleg tega omejujejo še skupno število piškotkov, dolžino piškotka in število piškotkov na posamezno domeno.

Opis piškotka

Piškotek je sestavljen iz več delov, ki so med seboj ločeni s podpičji. Vsak piškotek je poimenovan, ima vrednost in datum, do kdaj je veljaven. Poleg tega je lahko vezan tudi na skupino strani na izbrani skupini strežnikov, lahko ima pa tudi nastavljeno lastnost, da ga smemo pošiljati samo preko varnih povezav. Obvezen je samo del z imenom in vrednostjo, vse ostale opise piškotka pa lahko izpustimo, vključno s pripadajočimi podpičji. Polna oblika opisa piškotka izgleda takole:

ime=vrednost; expires=rok; path=pot; domain=domena; secure

Vsak piškotek mora imeti ime in vrednost, pri čemer je lahko vrednost tudi prazna. Preko imena lahko dostopamo do vrednosti piškotka.

Podatek expires določa, kako dolgo bo piškotek veljaven. Po izteku tega roka bo spletni brskalnik piškotek zbrisal. Vrednost tega podatka mora biti v standardni obliki, kot jo vrne metoda toUTCString razreda Date(primer: Thu, 24 Sep 2015 06:29:14 GMT). Če podamo rok, ki je že potekel, bo brskalnik piškotek takoj pobrisal. Če roka ne določimo, veljavnost piškotka poteče, ko uporabnik zapusti naše spletne strani.

Opis domain določa skupino strežnikov, katerim je piškotek namenjen. Vrednost .sckr.si določa, da bo spletni brskalnik poleg vsakega zahtevka po novi strani kateremu od strežnikov v tej domeni poslal tudi podatke o piškotku. Privzeta vrednost te lastnosti je domena strežnika, ki je piškotek nastavil.

Opis path določa pot do datotek na strežniku, katerim je piškotek namenjen. Vrednost / pravi, da je piškotek namenjen vsem datotekam, vrednost /file pa seznam datotek omeji na tiste, ko so v mapah, katerih ime se prične na file, in v vseh njihovih podmapah. Privzeta vrednost te lastnosti je pot do datoteke, od koder smo nastavili piškotek.

Opis secureima logično vrednost in določa (če ga napišemo), da lahko piškotek strežniku pošljemo samo po varnih povezavah. Če tega ne napišemo, lahko brskalnik pošlje piškotek tudi po nezavarovanih povezavah.

Uporaba piškotkov

Z JavaScriptom piškotek kreiramo ob določenem dogodku (ko uporabnik klikne sliko, izpolni obrazec...), pri čemer izvedemo naslednji ukaz:

document.cookie = "opis piškotka"

Lastnost document.cookie definira piškotek. Če definiramo najprej en piškotek, nato pa še drugega, prvega s tem nismo izgubili. Prirejanje vrednosti tej lastnosti namreč ni običajno prirejanje, pač pa pomeni definicijo novega piškotka, ki ima za stranski učinek spremembo vrednosti lastnosti. Vrednost lastnosti document.cookie je niz, ki vsebuje zaporedje imen in vrednosti vseh pripadajočih še veljavnih piškotkov.

Kreiranje piškotkov

S funkcijo setCookie lahko nastavimo piškotek. Funkcija sprejme kar nekaj parametrov, od katerih sta obvezna samo prva dva: ime in vrednost. Parameter rok mora biti objekt razreda Date, parametra pot in domena sta niza, parameter varno pa logična vrednost:

function setCookie(ime, vrednost, rok, pot, domena, varno) {    
   document.cookie =
      ime + "=" + encodeURIComponent(vrednost) +
      ((rok) ? "; expires=" + rok.toUTCString() : "") + 
      ((pot) ? "; path=" + pot : "") + 
      ((domena) ? "; domain=" + domena : "") + 
      ((varno) ? "; secure" : "") 
}

Brisanje piškotkov

S funkcijo deleteCookie piškotek zbrišemo. Funkcija ima obvezen parameter ime, ki določa, kateri piškotek želimo zbrisati. Parametra pot in domena morata imeti enaki vrednosti kot takrat, ko smo piškotek nastavili:

function deleteCookie(ime, pot, domena) {
   document.cookie =  
      ime + "=" + 
      "; expires=Thu, 01-Jan-70 00:00:01 GMT" +
      ((pot) ? "; path=" + pot : "") +
      ((domena) ? "; domain=" + domena : "") 
}

Branje piškotkov

Funkcijo getCookie poišče in vrne vrednost piškotka z danim imenom, pri čemer ima kar precej dela, saj je vrednost piškotka zapisana nekje v nizu document.cookie:

function getCookie(ime) {
    ime += "=";
    var dc = document.cookie;
    var start = dc.indexOf("; " + ime);
    if (start >= 0) start += 2
    else {
       start = dc.indexOf(ime)
       if (start != 0) return null
    }
    start += ime.length;
    var konec = dc.indexOf(";", start);
    if (konec == -1) konec = dc.length;
    return decodeURIComponent(dc.substring(start, konec)); 
}

Spreminjanje piškotkov

Z JavaScriptom spreminjamo piškotke na enak način, kot jih kreiramo. Nov opis piškotka prepiše staro vsebino.

Nastavljanje veljavnosti piškotkov

Pri nastavljanju veljavnosti piškotka bo v precejšnjo pomoč funkcija afterSomeDays, ki sestavi in vrne datum, kakršen bo čez nekaj dni (število dni je parameter).

function afterSomeDays(dnevi) {
    var datum = new Date();
    datum.setTime(datum.getTime() + dnevi * 86400000);
    return datum; 
}

Primer uporabe piškotkov: predstavitev uporabnika

V primeru kreiramo piškotek, v katerem shranimo ime uporabnika. Ko uporabnik prvič obišče spletno stran je pozvan preko pogovornega okna, da vpiše svoje ime. Vpisano ime shranimo v piškotek. Ko uporabnik naslednjič obišče spletno stran, ga pozdravimo s sporočilom. Spletni strani dodamo še dva gumba:

  • prvi gumb "Pozabi ime" pobriše piškotek
  • drugi gumb "Spremeni ime" spremeni vsebino piškotka

Vse zgoraj prikazane funkcije smo zapisali v datoteko piskotki.js, ki jo vključimo v dokument HTML.

<script src="piskotki.js"></script>
<h1>Predstavitev uporabnika</h1> <hr />
<script> 
   var uporabnik = getCookie("uporabnik");
   if (!uporabnik) {
      uporabnik = prompt("Vpiši svoje ime:", "")
   };
   if (!uporabnik) {
      document.writeln("Dobrodošel, neznanec.")
   }
   else { 
      document.writeln("Dobrodošel, " + uporabnik + ".");
      setCookie("uporabnik", uporabnik, afterSomeDays(365));
   };
</script>

<hr />

<script>
   function pozabiIme() { 
      deleteCookie("uporabnik");
      location.reload();
   }
   function spremeniIme() { 
      uporabnik = prompt("Vpiši svoje ime:", uporabnik);
      if (uporabnik == null) return;
      if (!uporabnik) {
         pozabiIme();   
      } 
      else { 
         setCookie("uporabnik", uporabnik, afterSomeDays(365));
         location.reload();
      }; 
   };
</script>

<button onclick="pozabiIme()"> Pozabi me!</button>
<button onclick="spremeniIme()"> Spremeni ime! </button>

Prikaz primera v noven oknu brskalnika.