Soubory cookie JavaScript

Obsah

    Zobrazit obsah

Soubory cookie vám umožňují ukládat informace o uživateli na webových stránkách.

Co jsou soubory cookie?

Cookies jsou data uložená v malých textových souborech ve vašem počítači.

Když webový server odešle webovou stránku do prohlížeče, spojení je vypne a server zapomene vše o uživateli.

Soubory cookie byly vynalezeny, aby vyřešily problém „jak si zapamatovat informace o uživatel":

  • Když uživatel navštíví webovou stránku, jeho jméno může být uloženo v cookie.

  • Když uživatel stránku příště navštíví, cookie si „pamatuje“ jeho jméno.

Soubory cookie se ukládají v párech název-hodnota, jako jsou:

username = John Doe

Když prohlížeč požaduje webovou stránku ze serveru, jsou k požadavku přidány soubory cookie patřící této stránce. Tímto způsobem server získá potřebná data k „zapamatování“ informací o uživatelích.

Žádný z níže uvedených příkladů nebude fungovat, pokud má váš prohlížeč vypnutou podporu místních souborů cookie.

Vytvořte soubor cookie pomocí JavaScriptu

JavaScript může vytvářet, číst a mazat soubory cookie pomocí document.cookie vlastnictví.

Pomocí JavaScriptu lze soubor cookie vytvořit takto:

document.cookie = "username=John Doe";

Můžete také přidat datum vypršení platnosti (v UTC čase). Ve výchozím nastavení je soubor cookie odstraněn při zavření prohlížeče:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

Pomocí parametru cesty můžete prohlížeči sdělit, ke které cestě soubor cookie patří. Ve výchozím nastavení patří cookie k aktuální stránce.

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Přečtěte si soubor cookie pomocí JavaScriptu

Pomocí JavaScriptu lze soubory cookie číst takto:

let x = document.cookie;

document.cookie vrátí všechny soubory cookie v jednom řetězci podobně jako: cookie1=value; cookie2=hodnota; cookie3=hodnota;

Změňte soubor cookie pomocí JavaScriptu

Pomocí JavaScriptu můžete změnit soubor cookie stejným způsobem, jakým jej vytváříte:

document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Stará cookie je přepsána.

Odstraňte soubor cookie pomocí JavaScriptu

Smazání cookie je velmi jednoduché.

Při smazání souboru cookie nemusíte zadávat hodnotu souboru cookie.

Stačí nastavit parametr expires na minulé datum:

document.cookie = "username=; expires=Thu, 01 
Jan 1970 00:00:00 UTC; path=/;";

Měli byste definovat cestu souboru cookie, abyste zajistili, že odstraníte správný soubor cookie.

Některé prohlížeče vám nedovolí smazat cookie, pokud nezadáte cestu.

Řetězec cookie

Vlastnost document.cookie vypadá jako běžný textový řetězec. Ale to není.

I když do document.cookie napíšete celý řetězec cookie, při opětovném čtení můžete vidět pouze soubor jeho dvojice název-hodnota.

Pokud nastavíte nový soubor cookie, starší soubory cookie nebudou přepsány. Nový soubor cookie je přidán do document.cookie, takže pokud čtete document.cookie opět dostanete něco jako:

cookie1=hodnota; cookie2=hodnota;

Pokud chcete zjistit hodnotu jednoho zadaného cookie, musíte napsat JavaScript funkce, která hledá hodnotu cookie v řetězci cookie.

Příklad souboru cookie JavaScript

V následujícím příkladu vytvoříme soubor cookie, který ukládá jméno návštěvníka.

Při prvním příchodu návštěvníka na webovou stránku bude požádán o vyplnění svého jména. Jméno je pak uloženo v cookie.

Až se návštěvník příště dostane na stejnou stránku, dostane uvítací zprávu.

Pro příklad vytvoříme 3 funkce JavaScriptu:

  1. Funkce pro nastavení hodnoty cookie

  2. Funkce pro získání hodnoty cookie

  3. Funkce pro kontrolu hodnoty cookie

Funkce pro nastavení souboru cookie

Nejprve vytvoříme funkci, která uloží jméno návštěvníka do proměnné cookie:

Příklad

function setCookie(cname, cvalue, exdays) {
   const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

Vysvětlený příklad:

Parametry funkce výše jsou název cookie (cname), hodnota cookie (cvalue) a počet dní do vypršení platnosti cookie (exdays).

Funkce nastaví cookie sečtením názvu cookie, cookie hodnotu a řetězec s vypršením platnosti.

Funkce pro získání souboru cookie

Poté vytvoříme funkci, která vrací hodnotu zadaného souboru cookie:

Příklad

function getCookie(cname) {
   
let name = cname + "=";
   
let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
      let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
      
 }
      if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
      }
    }
    return "";
}

Vysvětlení funkce:

Vezměte cookiename jako parametr (cname).

Vytvořte proměnnou (name) s textem, který chcete hledat (cname + "=").

Dekódujte řetězec cookie, abyste mohli zpracovávat soubory cookie se speciálními znaky, např. '$'

Rozdělte document.cookie na středníky do pole nazvaného ca (ca = decodedCookie.split(';')).

Projděte pole ca (i=0; i < ca.length; i++) a načtěte každou hodnotu c=ca[i]).

Pokud je soubor cookie nalezen (c.indexOf(name) == 0), vraťte hodnotu souboru cookie (c.substring(name.length, c.length).

Pokud soubor cookie nebyl nalezen, vraťte „“.

Funkce pro kontrolu souboru cookie

Nakonec vytvoříme funkci, která kontroluje, zda je nastaven soubor cookie.

Pokud je soubor cookie nastaven, zobrazí se pozdrav.

Pokud soubor cookie není nastaven, zobrazí se okno s výzvou k zadání jména uživatele, a uchovává soubor cookie uživatelského jména po dobu 365 dní voláním funkce setCookie:

Příklad

function checkCookie() {
  let 
username = getCookie("username");
  if (username != "") {
     alert("Welcome again " + username);
  } else {
    username = prompt("Please enter your name:", "");
      if (username != "" 
&& username != null) {
        setCookie("username", username, 365);
      }
  }
}

Teď všichni společně

Příklad

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
   
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + 
";" + expires + ";path=/";
}
function getCookie(cname) {
  let name = cname + "=";
    let ca 
= document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) 
{
    
let c = ca[i];
    while (c.charAt(0) == ' 
') {
      c = c.substring(1);
    }
    if (c.indexOf(name) 
 == 0) {
      return c.substring(name.length, c.length);
      }
  }
    return "";
}
function 
checkCookie() {
  let user = getCookie("username");
  if (user != "") 
{
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
      if (user != "" && 
user != null) {
      setCookie("username", user, 365);
      }
  }
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
     user = prompt("Please enter your name:","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>

Výše uvedený příklad spouští při načítání stránky funkci checkCookie().