Soubory cookie v JavaScript: Set, Get & Delete Example

Co jsou cookies?

Soubor cookie je datový soubor, který je uložen ve vašem počítači, aby k němu mohl přistupovat váš prohlížeč. Výhody souborů cookie jste si mohli užívat, ať už vědomě či nevědomě. Zůstali jste někdy přihlášeni na webu, jako je Facebook, abyste nemuseli při každém pokusu o přihlášení zadávat své údaje? Pokud ano, používáte soubory cookie. Soubory cookie se ukládají jako páry klíč/hodnota.

Důležité upřesnění: soubor cookie neuchovává vaše heslo. Obsahuje identifikátor relace, což je náhodný token, který server vydá po úspěšném přihlášení. Server přiřadí tento token k vašemu účtu, takže samotné heslo nikdy neopustí server.

Proč potřebujete cookie?

Komunikace mezi a webový prohlížeč a serverem probíhá pomocí bezstavového protokolu s názvem HTTP. Bezstavový protokol zpracovává každý požadavek nezávisle. Server tedy data po odeslání do prohlížeče neuchovává. V mnoha situacích však budou data znovu vyžadována. Zde přicházejí na řadu soubory cookie. Díky souborům cookie webový prohlížeč nemusí komunikovat se serverem pokaždé, když jsou data vyžadována. Místo toho je lze načíst přímo z počítače.

Mezi typické použití patří zapamatování přihlášené relace, uložení jazykových nebo šablonových preferencí,ping položky v obchoděping košík mezi stránkami a počítání návštěvníků, kteří navštívili poprvé, a těch, kteří se vracejí.

Javascript Nastavit cookie

Soubory cookie můžete vytvořit pomocí vlastnosti document.cookie takto.

document.cookie = "cookiename=cookievalue"

Dokonce můžete k souboru cookie přidat datum platnosti, aby byl daný soubor cookie z počítače odstraněn v zadaný den. Datum platnosti by mělo být nastaveno ve formátu UTC/GMT. Pokud datum platnosti nenastavíte, soubor cookie bude odstraněn, jakmile uživatel zavře prohlížeč.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC"

Můžete také nastavit doménu a cestu, abyste určili, do které domény a do kterých adresářů v dané doméně soubor cookie patří. Ve výchozím nastavení soubor cookie patří stránce, která jej nastavuje.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC; path=/ "

//vytvoří soubor cookie s doménou aktuální stránky a cestou pokrývající celou doménu.

JavaSkript pro získání souboru cookie

K souboru cookie můžete přistupovat takto, což vrátí všechny soubory cookie uložené pro aktuální doménu.

var x =  document.cookie

Vrácená hodnota je jeden řetězec ve formátu name1=value1; name2=value2Neexistuje žádná vestavěná metoda pro čtení jedné cookie podle názvu, takže řetězec musí být rozdělen. Níže uvedený pomocník vrací jednu hodnotu a prázdný řetězec, pokud název chybí.

function getCookie(name) {
    const pairs = document.cookie.split(";");
    for (let i = 0; i < pairs.length; i++) {
        const pair = pairs[i].trim();
        if (pair.indexOf(name + "=") === 0) {
            // decode in case the value contained spaces or symbols
            return decodeURIComponent(pair.substring(name.length + 1));
        }
    }
    return "";
}

document.cookie = "username=Ann Smith; path=/";
console.log(getCookie("username"));
console.log(getCookie("missing") === "");

Výstup:

Ann Smith
true

JavaSkript Odstranit cookie

Chcete-li soubor cookie smazat, stačí nastavit hodnotu souboru cookie na empty a hodnotu expires na datum, které již uplynulo.

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

Jeden detail je příčinou většiny neúspěšných smazání. Prohlížeč identifikuje soubor cookie podle jeho názvu, cesty a domény, takže příkaz k odstranění musí opakovat stejnou cestu a doménu, které byly použity při vytvoření souboru cookie.

// created with an explicit path
document.cookie = "theme=dark; path=/; max-age=2592000";

// deletion must repeat that same path
document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// max-age=0 achieves the same result in one shorter line
document.cookie = "theme=; path=/; max-age=0";

Vysvětlení atributů souborů cookie

Každý atribut za prvním středníkem mění dobu platnosti souboru cookie, které požadavky jej přenášejí a který kód jej může číst. Níže uvedený odkaz zahrnuje všechny tyto atributy.

SameSite si zaslouží zvláštní pozornost, protože prohlížeče nyní používají výchozí nastavení. Tři akceptované hodnoty se chovají následovně.

• Přísný: Soubor cookie se nikdy neodesílá, pokud požadavek pochází z jiného webu, což je nejbezpečnější nastavení pro bankovní relace.
• Laxní: Soubor cookie se přenáší s navigací na nejvyšší úrovni, například kliknutím na odkaz, ale ne s obrázky nebo rámci napříč weby. Toto je výchozí nastavení moderního prohlížeče.
• Žádný: Soubor cookie se odesílá při každém požadavku mezi weby a musí být spárován s atributem Secure, jinak jej prohlížeč odmítne.

// a well configured cookie set from client side script
document.cookie = "language=en; path=/; max-age=31536000; SameSite=Lax; Secure";

Zkuste tento příklad sami

Níže uvedený skript kombinuje všechny tři operace. Vytvoří soubor cookie s platností v řádu dní, přečte jej zpět podle názvu a vítá vracejícího se návštěvníka. Speciální pokyny pro spuštění kódu… Dvakrát stiskněte tlačítko Spustit.

<html>
<head>
	<title>Cookie!!!</title>
	<script type="text/javascript">
		function createCookie(cookieName,cookieValue,daysToExpire)
        {
          var date = new Date();
          date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
          document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
        }
		function accessCookie(cookieName)
        {
          var name = cookieName + "=";
          var allCookieArray = document.cookie.split(';');
          for(var i=0; i<allCookieArray.length; i++)
          {
            var temp = allCookieArray[i].trim();
            if (temp.indexOf(name)==0)
            return temp.substring(name.length,temp.length);
       	  }
        	return "";
        }
		function checkCookie()
        {
          var user = accessCookie("testCookie");
          if (user!="")
        	alert("Welcome Back " + user + "!!!");
          else
          {
            user = prompt("Please enter your name");
            num = prompt("How many days you want to store your name on your computer?");
            if (user!="" && user!=null)
            {
            createCookie("testCookie", user, num);
            }
          }
        }
	</script>
</head>
<body onload="checkCookie()"></body>
</html>

Očekávané chování:

First run  : "Please enter your name"  -> Ann
             "How many days you want to store your name on your computer?" -> 5
Second run : alert box shows  Welcome Back Ann!!!

Code vysvětlení: Funkce createCookie převede počet dní na milisekundy a přičte je k aktuálnímu času, čímž získá datum platnosti. Funkce accessCookie rozdělí řetězec cookie na středníky, ořízne každý fragment a porovná začátek fragmentu s požadovaným názvem. Funkce checkCookie tyto dva údaje spojí při načítání stránky.

Soubory cookie vs. localStorage vs. sessionStorage

Soubory cookie nejsou jediným místem, kde může prohlížeč ukládat data. Existují dvě možnosti webového úložiště a správný výběr zabrání odesílání zbytečných bajtů při každém požadavku.

Praktické pravidlo je jednoduché. Pokud server potřebuje hodnotu, použijte soubor cookie. Pokud ji potřebuje pouze stránka, použijte localStorage nebo sessionStorage, protože tyto hodnoty nikdy nepřidávají váhu síťovému požadavku.

Kód pro zpracování souborů cookie je obvykle sdílen na mnoha stránkách, proto si jej zkontrolujte interní a externí JavaScénář než se rozhodnete, kam jej umístit. Zde použité rozdělení řetězců vychází z JavaŘetězce skriptu a JavaMetody skriptových polía další funkční skripty se objevují v praktický JavaPříklady skriptového kódu.

Nejčastější dotazy