Úvod do cookies: Pochopenie a práca s JavaScript cookies

Preslav Dobrev2022-10-25 · 7 min read

Úvod do cookies: Pochopenie a práca s JavaScript cookies

Súbory cookie prehliadača, alebo HTTP cookies, sú textové súbory pozostávajúce z malých množstiev dát. Webové stránky používajú tieto informácie na sledovanie pohybu používateľa, čo im umožňuje ponúkať prispôsobené funkcie a zlepšovať zážitok z prehliadania. Súbory cookie môžu uchovávať až 4096 bajtov dát. Na jednu doménu však môžeme pridať len obmedzený počet súborov cookie v závislosti od prehliadača.

Základné pochopenie súborov cookie HTTP je nevyhnutné pre každého používateľa internetu, či už len prehliadate pre zábavu, alebo sa tým živíte. Tento sprievodca vás podrobne zoznámi so súbormi cookie a ich rôznymi typmi. Naším cieľom je pomôcť vám pochopiť a pracovať so súbormi JavaScript Cookies.

Začnime!

Predpoklady

Ak chcete sledovať tento návod, musíte mať:

Základné pochopenie JavaScriptu.

Začíname so súbormi JavaScript Cookies

Práca so súbormi cookie JavaScript je jednoduchá. Umožňuje bez námahy vytvárať, upravovať a získavať súbory cookie. Okrem toho môžeme použiť vlastnosť cookie objektu Document na manipuláciu a obmedzenie vlastností súborov cookie, ako sú napríklad názov, hodnota a dĺžka.

Typy súborov cookie

Najprv sa pozrime na rôzne typy súborov cookie:

Súbory cookie prvej strany

Tieto súbory cookie sa vytvárajú a ukladajú pri každej návšteve webovej stránky používateľom. Umožňujú vlastníkom webových stránok získať podrobný prehľad o údajoch používateľov a poskytnúť im lepší zážitok z prehliadania.

Trvalé súbory cookie

Pre tento druh súborov cookie priraďuje vydavateľ dátum vypršania platnosti. Preto sa používajú oveľa dlhšie obdobie. To znamená, že aj keď zatvoríte prehliadač, súbor cookie v ňom zostane. Údaje sa tiež odosielajú späť vydavateľovi pri každej návšteve webovej stránky, ktorá súbor cookie vytvorila.

Relačné súbory cookie

Tieto súbory cookie sú len dočasné a budú uložené v pamäti vášho prehliadača, kým je otvorený. Po jeho zatvorení sa súbor cookie odstráni z histórie prehliadača, čo predstavuje nižšie bezpečnostné riziko. Nemusíte uvádzať dátum vypršania platnosti.

Súbory cookie tretích strán

Súbory cookie tretích strán vytvára stránka, ktorú momentálne nenavštevujete. Tieto súbory cookie sú väčšinou užitočné na sledovanie používateľa, ktorý klikol na reklamu, a jeho priradenie k doméne, ktorá ho odporučila.

Vytváranie súborov cookie

Súbory cookie môžeme vytvárať dvoma spôsobmi:

Odoslaním Set-Cookie v hlavičke odpovede HTTP. V závislosti od technológií použitých pre webový server môžete spravovať hlavičky súborov cookie pomocou nástrojov a knižníc. Súbory cookie môžu obsahovať informácie, ako je dátum vypršania platnosti a bezpečnostné funkcie, ako je smernica secure a HttpOnly príznak.

HttpOnly: Označuje, že prehliadač nemôže čítať ani upravovať súbory cookie.
Secure: To znamená, že súbor cookie je možné odoslať iba cez HTTPS.

Pomocou JavaScript vlastnosti document.cookie môžeme vytvárať, čítať a mazať súbory cookie.

Krok 1 — Vytvorenie súboru cookie

Ďalej si ukážeme proces vytvorenia JavaScript cookie. Súbory cookie sa ukladajú vo formáte páru názov-hodnota:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

Vo vyššie uvedenom súbore cookie je UserName názov súboru cookie, zatiaľ čo CloudSigma je hodnota v ňom uložená.

Súbor cookie má dátum vypršania platnosti. Predvolene sa automaticky vymaže po zatvorení prehliadača. K súboru cookie môžete pridať aj dátum vypršania platnosti:

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";

Predvolene súbory cookie patria aktuálnej stránke. Súbor cookie však môžeme špecifikovať aj pomocou parametra path :

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 vs Cookie Expire

V závislosti od vašich potrieb môžete na nastavenie dátumu vypršania platnosti súboru cookie použiť tieto dve stratégie. Rozdiel medzi nimi je v tom, že expires nastavuje dátum vypršania platnosti, kedy sa súbor cookie vymaže. Naopak, max-Age nastavuje čas v sekundách, kedy bude cookie vymazaná. Bohužiaľ, max-age nie je podporovaný všetkými prehliadačmi.

Príklad nastavenia cookie pomocou expires a max-age:

Expires:

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

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // v milisekundách

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

Atribút document.cookie vracia reťazec. Ak existujú dve alebo viac cookies, na ich oddelenie používame bodkočiarku ( ;) a medzeru.

Na extrahovanie konkrétnej cookie zo zoznamu cookies používame metódu split(). Táto metóda rozdelí zoznam na jednotlivé dvojice názvov a hodnôt. Po dokončení môžete vyhľadať cieľovú cookie, ktorú chcete prečítať:

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("Vitajte znova, " + UserName);
} else {
    firstName = prompt("Zadajte svoje UserName:");
        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("Vitajte znova, " + UserName);

} else {

firstName = prompt("Zadajte svoje UserName:");

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

setCookie("UserName", UserName, 30);

}

Poďme si vysvetliť funkcie, ktoré sme v kóde vytvorili:

Názov funkcie	Popis
setCookie()	Vytvorí cookie
getCookie()	Číta hodnotu cookie
checkCookie()	Overuje, či je nastavené UserName alebo nie.

V ďalšom kroku sa naučíme, ako aktualizovať cookie.

Step 3 — Updating a Cookie

Môžeme nastaviť nové hodnoty pre atribúty našej cookie. V našom príklade aktualizujme predplatné používateľa z mesačného plánu na štvrťročný plán.

Aktualizujme atribút max-age cookie UserName z 30 dní na 180 dní:

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

Prepísanie cookie s rovnakým názvom vymaže cookie, ktorú chcete odstrániť. Cookie môžeme vymazať nastavením atribútu max-age na 0:

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

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

Okrem toho, ak má súbor cookie špecifikovanú cestu, vymažte ho jej určením:

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

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

Záver

Súbory cookie sú nevyhnutné pre správne fungovanie webovej lokality. V tomto úvodnom návode sme podrobne prebrali súbory cookie a ich rôzne typy. Okrem toho sme sa na príklade naučili pracovať so súbormi cookie. Teraz, keď už viete pohodlne používať JavaScript cookies, začnite vytvárať prispôsobené súbory cookie, aby ste sa o tejto téme dozvedeli a preskúmali viac.

Okrem toho existuje mnoho návodov na JavaScript a vývoj webu, ktoré môžete preskúmať na našom blogu:

Príjemné kódovanie!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev je kreatívny dizajnér v spoločnosti CloudSigma, ktorý sa zameriava na konzistentnú firemnú identitu prostredníctvom tradičných a inovatívnych marketingových kanálov. Dokáže brilantne spájať umeleckú víziu so strategickým marketingom, čím vytvára pôsobivé príbehy značky.