Úvod do cookies: Porozumění a práce s JavaScript cookies

Preslav Dobrev2022-10-25 · 7 min read

Úvod do cookies: Porozumění a práce s JavaScript cookies

Soubory cookie prohlížeče, neboli soubory cookie HTTP, jsou textové soubory tvořené drobnými daty. Webové stránky tyto informace používají ke sledování uživatelovy cesty, což jim umožňuje nabízet funkce šité na míru a zlepšovat zážitek z prohlížení. Soubory cookie mohou ukládat až 4096 bajtů dat. V závislosti na prohlížeči však můžeme na jednu doménu přidat pouze omezený počet souborů cookie.

Základní porozumění souborům cookie HTTP je nezbytné pro každého uživatele internetu, ať už jen surfujete pro zábavu, nebo se tím živíte. Tento průvodce vás podrobně seznámí se soubory cookie a jejich různými typy. Naším cílem je pomoci vám porozumět souborům cookie v JavaScriptu a pracovat s nimi.

Začněme!

Požadavky

Chcete-li sledovat tento návod, musíte mít:

Základní znalost JavaScriptu.

Začínáme se soubory cookie v JavaScriptu

Práce se soubory cookie v JavaScriptu je jednoduchá. Umožňuje snadno vytvářet, upravovat a získávat soubory cookie. Kromě toho můžeme použít vlastnost cookie objektu Document k manipulaci a omezení vlastností souborů cookie, jako je mimo jiné název, hodnota a délka.

Typy souborů cookie

Nejprve se podívejme na různé typy souborů cookie:

Soubory cookie první strany

Tyto soubory cookie se vytvářejí a ukládají při každé návštěvě uživatele na webu. Umožňují vlastníkům webových stránek získat podrobný přehled o datech uživatelů a poskytnout jim lepší zážitek z prohlížení.

Trvalé soubory cookie

Pro tento druh souborů cookie přiřazuje vydavatel datum vypršení platnosti. Proto se používají po mnohem delší dobu. To znamená, že i když prohlížeč zavřete, soubor cookie v něm zůstane. Data se také odesílají zpět vydavateli při každé návštěvě webu, který soubor cookie vytvořil.

Relační soubory cookie

Tyto soubory cookie jsou pouze dočasné a budou uloženy v paměti vašeho prohlížeče, dokud bude otevřený. Po jeho zavření se soubor cookie odstraní z historie prohlížeče, což představuje nižší bezpečnostní riziko. Nemusíte u nich uvádět datum vypršení platnosti.

Soubory cookie třetích stran

Soubory cookie třetích stran jsou vytvářeny webem, který právě nenavštěvujete. Tyto soubory cookie jsou většinou užitečné pro sledování uživatele, který klikl na reklamu, a jeho přiřazení k doméně, která ho odkázala.

Vytváření souborů cookie

Soubory cookie můžeme vytvořit dvěma způsoby:

Odeslat Set-Cookie v hlavičce odpovědi HTTP. V závislosti na technologiích použitých pro webový server můžete hlavičky souborů cookie spravovat pomocí nástrojů a knihoven. Soubory cookie mohou obsahovat informace, jako je datum vypršení platnosti a bezpečnostní prvky, jako je direktiva secure a příznak HttpOnly.

HttpOnly: Indikuje, že prohlížeč nemůže číst ani upravovat soubory cookie.
Secure: To indikuje, že soubor cookie lze odeslat pouze přes HTTPS.

Pomocí vlastnosti document.cookie v JavaScriptu můžeme vytvářet, číst a mazat soubory cookie.

Krok 1 — Vytvoření souboru cookie

Dále si ukážeme proces vytvoření souboru cookie v JavaScriptu. Soubory cookie se ukládají ve formátu páru název-hodnota:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

Ve výše uvedeném souboru cookie je UserName název souboru cookie, zatímco CloudSigma je hodnota v něm uložená.

Soubor cookie má datum vypršení platnosti. Ve výchozím nastavení se automaticky smaže po zavření prohlížeče. K souboru cookie můžete také přidat datum vypršení 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";

Ve výchozím nastavení patří soubory cookie aktuální stránce. Soubor cookie však můžeme specifikovat také pomocí parametru 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 na vašich potřebách můžete k nastavení data vypršení platnosti souboru cookie použít tyto dvě strategie. Rozdíl mezi nimi je v tom, že expires nastavuje datum vypršení platnosti, kdy se soubor cookie smaže. Naopak max-Age nastavuje čas v sekundách, kdy bude cookie smazána. Bohužel, max-age není podporováno všemi prohlížeči.

Příklad nastavení cookie pomocí 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

Atribut document.cookie vrací řetězec. Pokud existují dvě nebo více cookies, používáme k jejich oddělení středník ( ;) a mezeru.

K extrahování jednotlivé cookie ze seznamu cookies používáme metodu split(). Tato metoda rozdělí seznam na jednotlivé dvojice názvů a hodnot. Jakmile je to hotovo, můžete vyhledat cílovou cookie, kterou chcete přečíst:

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("Vítejte znovu, " + UserName);
} else {
    firstName = prompt("Zadejte své 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("Vítejte znovu, " + UserName);

} else {

firstName = prompt("Zadejte své UserName:");

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

setCookie("UserName", UserName, 30);

}

Pojmětě si vysvětlit funkce, které jsme v kódu vytvořili:

Function Name	Description
setCookie()	Creates a cookie
getCookie()	Reads the value of the cookie
checkCookie()	Ověřuje, zda je UserName nastaveno, či nikoli.

V dalším kroku se naučíme, jak cookie aktualizovat.

Step 3 — Updating a Cookie

Můžeme nastavit nové hodnoty atributů naší cookie. V našem příkladu aktualizujme předplatné uživatele z měsíčního plánu na čtvrtletní plán.

Aktualizujme atribut max-age cookie UserName ze 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

Přejmenování cookie se stejným názvem smaže cookie, kterou chcete odstranit. Cookie můžeme smazat nastavením atributu max-age na 0:

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

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

Pokud má navíc soubor cookie určenou cestu, smažte jej jejím zadáním:

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

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

Závěr

Soubory cookie jsou nezbytné pro správné fungování webových stránek. V tomto úvodním návodu jsme podrobně probrali soubory cookie a jejich různé typy. Navíc jsme se na příkladu naučili se soubory cookie pracovat. Nyní, když už umíte používat JavaScript cookies, začněte vytvářet vlastní cookies, abyste se o tomto tématu dozvěděli a prozkoumali více.

Kromě toho existuje mnoho návodů na JavaScript a vývoj webu, které můžete prozkoumat na našem blogu:

Příjemné programování!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev je kreativní designér ve společnosti CloudSigma, který se zaměřuje na konzistentní firemní identitu prostřednictvím tradičních i inovativních marketingových kanálů. Je zdatný v propojování umělecké vize se strategickým marketingem za účelem vytváření působivých příběhů značky.