Uvod u kolačiće: Razumijevanje i rad s JavaScript kolačićima

Preslav Dobrev2022-10-25 · 7 min read

Uvod u kolačiće: Razumijevanje i rad s JavaScript kolačićima

Kolačići preglednika, ili HTTP kolačići, tekstualne su datoteke sastavljene od sitnih dijelova podataka. Web-mjesta koriste ove informacije za praćenje korisnikova putovanja, omogućujući im da ponude prilagođene značajke i poboljšaju njihovo iskustvo pregledavanja. Kolačići mogu pohraniti do 4096 bajtova podataka. Međutim, možemo dodati ograničen broj kolačića po domeni, ovisno o pregledniku.

Osnovno razumijevanje HTTP kolačića ključno je za svakog korisnika interneta, bez obzira na to pregledavate li samo iz zabave ili od toga živite. Ovaj vodič će detaljno vas upoznati s kolačićima i njihovim različitim vrstama. Naš je fokus pomoći vam da razumijete i radite s JavaScript kolačićima.

Započnimo!

Preduvjeti

Kako biste pratili ovaj vodič, morate imati:

Osnovno razumijevanje JavaScripta.

Početak rada s JavaScript kolačićima

Rad s JavaScript kolačićima je jednostavan. Omogućuje stvaranje, uređivanje i dohvaćanje kolačića bez napora. Osim toga, možemo koristiti svojstvo cookie objekta Document za manipuliranje i ograničavanje svojstava kolačića kao što su naziv, vrijednost i duljina, da spomenemo samo neke.

Vrste kolačića

Prvo, pogledajmo različite vrste kolačića:

Kolačići prve strane

Ovi se kolačići stvaraju i pohranjuju svaki put kada korisnik posjeti web-mjesto. Omogućuju vlasnicima web-mjesta da dobiju detaljan uvid u podatke korisnika i pruže im bolje iskustvo pregledavanja.

Trajni kolačići

Za ovu vrstu kolačića izdavatelj dodjeljuje datum isteka. Stoga se koristi znatno duže vrijeme. To znači da će kolačić ostati u pregledniku čak i ako ga zatvorite. Također, podaci se vraćaju izdavatelju svaki put kada posjetite web-mjesto koje je stvorilo kolačić.

Kolačići sesije

Ovi su kolačići samo privremeni i bit će pohranjeni u memoriji vašeg preglednika dok je otvoren. Kada ga zatvorite, kolačić se uklanja iz povijesti vašeg preglednika, što ih čini manjim sigurnosnim rizikom. Ne morate navesti datum isteka.

Kolačići treće strane

Kolačiće treće strane stvara web-mjesto koje trenutno ne posjećujete. Uglavnom, ovi su kolačići korisni za praćenje korisnika koji je kliknuo na oglas povezujući ga s domenom koja ga je uputila.

Stvaranje kolačića

Kolačiće možemo stvoriti pomoću dvije metode:

Slanje Set-Cookie u HTTP zaglavlju odgovora. Ovisno o tehnologijama koje se koriste za web poslužitelj, možete upravljati zaglavljima kolačića pomoću alata i knjižnica. Kolačići mogu sadržavati informacije kao što su datum isteka i sigurnosne značajke poput direktive secure i HttpOnly zastavice.

HttpOnly: Označava da preglednik ne može čitati niti mijenjati kolačiće.
Secure: Ovo označava da se kolačić može poslati samo putem HTTPS-a.

Korištenjem JavaScript document.cookie svojstva, možemo stvarati, čitati i brisati kolačiće.

Korak 1 — Stvaranje kolačića

Zatim ćemo prikazati postupak stvaranja JavaScript kolačića. Kolačići se spremaju u formatu para naziv-vrijednost:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

U gornjem kolačiću, UserName je naziv kolačića, dok je CloudSigma vrijednost pohranjena u njemu.

Kolačić ima datum isteka. Prema zadanim postavkama, automatski se briše nakon zatvaranja preglednika. Također možete dodati datum isteka svom kolačiću:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

Prema zadanim postavkama, kolačići pripadaju trenutnoj stranici. Međutim, također možemo odrediti kolačić uz pomoć path parametra:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

Cookie Max-Age naspram Cookie Expire

Ovisno o vašim potrebama, možete koristiti ove dvije strategije za postavljanje datuma isteka kolačića. Razlika između njih je expires postavlja datum isteka kada se kolačić briše. Naprotiv, max-Age postavlja vrijeme u sekundama kada će kolačić biti obrisan. Nažalost, max-age nije podržan od strane svih preglednika.

Primjer postavljanja kolačića pomoću expires i max-age:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // u milisekundama
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // u milisekundama

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

Step 2 — Reading a Cookie

Atribut document.cookie vraća niz znakova. Ako postoje dva ili više kolačića, koristimo točku sa zarezom( ;) i razmak kako bismo ih razdvojili.

Koristimo metodu split() kako bismo izdvojili pojedinačni kolačić s popisa kolačića. Ova metoda rastavlja popis na pojedinačne parove naziva i vrijednosti. Kada to učinite, možete potražiti ciljani kolačić koji želite pročitati:

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("Dobrodošli natrag, " + UserName);
} else {
    firstName = prompt("Unesite svoje korisničko ime:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("Dobrodošli natrag, " + UserName);

} else {

firstName = prompt("Unesite svoje korisničko ime:");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

Hajdemo razumjeti funkcije koje smo stvorili u kodu:

Function Name	Description
setCookie()	Creates a cookie
getCookie()	Reads the value of the cookie
checkCookie()	Provjerava je li UserName postavljen ili ne.

U sljedećem koraku naučit ćemo kako ažurirati kolačić.

Step 3 — Updating a Cookie

Možemo postaviti nove vrijednosti za atribute našeg kolačića. U našem primjeru, ažurirajmo korisničku pretplatu s mjesečnog plana na tromjesečni plan.

Ažurirajmo atribut max-age kolačića UserName s 30 dana na 180 dana:

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

Step 4 — Deleting a Cookie

Ponovno definiranje kolačića s istim nazivom obrisat će kolačić koji želite izbrisati. Kolačić možemo obrisati postavljanjem atributa max-age na 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

Osim toga, ako kolačić ima specificiranu putanju, obrišite ga tako da je navedete:

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

Zaključak

Kolačići su neophodni kako bi web stranica ispravno radila i funkcionirala. U ovom uvodnom vodiču detaljno smo raspravljali o kolačićima i njihovim različitim vrstama. Osim toga, naučili smo raditi s kolačićima uz pomoć primjera. Sada kada ste se upoznali s korištenjem JavaScript kolačića, počnite stvarati prilagođene kolačiće kako biste naučili i istražili više o ovoj temi.

Nadalje, postoji mnogo vodiča o JavaScriptu i web razvoju koje možete istražiti na našem blogu:

Sretno programiranje!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev je kreativni dizajner u CloudSigma, usredotočen na dosljedan poslovni identitet korištenjem tradicionalnih i inovativnih marketinških kanala. Vješt je u spajanju umjetničke vizije sa strateškim marketingom kako bi stvorio dojmljive brendirane priče.