Soubory cookie JavaScript
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, připojení se 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živateli“:
- Když uživatel navštíví webovou stránku, jeho jméno může být uloženo v cookie.
- Až 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, které ke stránce patří. 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 odstraňovat soubory cookie s touto document.cookie
vlastností.
Pomocí JavaScriptu lze soubor cookie vytvořit takto:
document.cookie = "username=John Doe";
Můžete také přidat datum vypršení platnosti (v čase UTC). Ve výchozím nastavení se soubor cookie vymaže 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í soubor cookie patří 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.cookievrátí všechny soubory cookie v jednom řetězci podobně jako: cookie1=hodnota; 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.
Soubor cookie
Vlastnost document.cookievypadá jako normální textový řetězec. Ale to není.
I když do document.cookie zapíšete celý řetězec cookie, při dalším čtení uvidíte pouze jeho pár 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 si znovu přečtete document.cookie, dostanete něco jako:
cookie1 = hodnota; cookie2 = hodnota;
Chcete-li najít hodnotu jednoho zadaného cookie, musíte napsat funkci JavaScript, 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ý uloží 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:
- Funkce pro nastavení hodnoty cookie
- Funkce pro získání hodnoty cookie
- Funkce pro kontrolu hodnoty cookie
Funkce pro nastavení souboru cookie
Nejprve vytvoříme soubor function, který ukládá 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 výše uvedené funkce jsou název cookie (cname), hodnota cookie (cvalue) a počet dní do vypršení platnosti cookie (exdays).
Funkce nastaví soubor cookie sečtením názvu cookie, hodnoty cookie a řetězce, jehož platnost vyprší.
Funkce pro získání souboru cookie
Poté vytvoříme a function, které vrátí hodnotu zadaného 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 (název) 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(název) == 0), vraťte hodnotu souboru cookie (c.substring(název.délka, c.délka).
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 cookie nastaveno, zobrazí se pozdrav.
Pokud není soubor cookie nastaven, zobrazí se okno s výzvou k zadání jména uživatele a uloží soubor cookie uživatelského jména po dobu 365 dní voláním setCookiefunkce:
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);
}
}
}
Výše uvedený příklad spustí checkCookie()funkci při načtení stránky.