Çerezler, kullanıcı bilgilerini web sayfalarında saklamanıza olanak tanır.
Çerezler, bilgisayarınızda küçük metin dosyalarında saklanan verilerdir.
Bir web sunucusu tarayıcıya bir web sayfası gönderdiğinde bağlantı kurulur. kapanır ve sunucu kullanıcı hakkındaki her şeyi unutur.
Çerezler "bilgilerin nasıl hatırlanacağı" sorununu çözmek için icat edildi. Kullanıcı":
Bir kullanıcı bir web sayfasını ziyaret ettiğinde adı bir çerezde saklanabilir.
Kullanıcının sayfayı bir sonraki ziyaretinde çerez onun adını "hatırlar".
Çerezler aşağıdaki gibi ad-değer çiftleri halinde kaydedilir:
username = John DoeBir tarayıcı, bir sunucudan bir web sayfası istediğinde, sayfaya ait çerezler bu isteğe eklenir. Bu şekilde sunucu kullanıcılar hakkındaki bilgileri "hatırlamak" için gerekli verileri alır.
Tarayıcınızda yerel çerez desteği kapalıysa aşağıdaki örneklerin hiçbiri çalışmaz.
JavaScript, document.cookie ile çerezleri oluşturabilir, okuyabilir ve silebilir. mülk.
JavaScript ile şu şekilde bir çerez oluşturulabilir:
document.cookie = "username=John Doe";Ayrıca bir son kullanma tarihi de ekleyebilirsiniz (UTC saatine göre). Varsayılan olarak çerez, tarayıcı kapatıldığında silinir:
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";Bir yol parametresi ile tarayıcıya çerezin hangi yola ait olduğunu söyleyebilirsiniz. Varsayılan olarak çerez geçerli sayfaya aittir.
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";JavaScript ile çerezler şu şekilde okunabilir:
let x = document.cookie;document.cookie, tüm çerezleri şuna benzer şekilde tek bir dizede döndürür: cookie1=value; çerez2=değer; çerez3=değer;
JavaScript ile bir çerezi, oluşturduğunuz yöntemle değiştirebilirsiniz:
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";Eski çerezin üzerine yazılır.
Bir çerezi silmek çok basittir.
Bir çerezi silerken çerez değeri belirtmenize gerek yoktur.
Sona erme parametresini geçmiş bir tarihe ayarlamanız yeterlidir:
document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 UTC; path=/;";Doğru çerezi sildiğinizden emin olmak için çerez yolunu tanımlamanız gerekir.
Bazı tarayıcılar, yolu belirtmediğiniz takdirde çerezi silmenize izin vermez.
document.cookie özelliği normal bir metin dizesine benzer. Ama öyle değil.
document.cookie'ye bir çerez dizisinin tamamını yazsanız bile, onu tekrar okuduğunuzda yalnızca bunun ad-değer çifti.
Yeni bir çerez ayarlarsanız eski çerezlerin üzerine yazılmaz. Yeni çerez document.cookie'ye eklenir, yani document.cookie'yi okursanız yine şöyle bir şey elde edeceksiniz:
çerez1=değer; çerez2=değer;
Belirtilen bir çerezin değerini bulmak istiyorsanız bir JavaScript yazmalısınız. Çerez dizesinde çerez değerini arayan işlev.
Aşağıdaki örnekte ziyaretçinin adını saklayan bir çerez oluşturacağız.
Bir ziyaretçi web sayfasına ilk kez geldiğinde kendisinden adını doldurması istenecektir. Ad daha sonra bir çerezde saklanır.
Ziyaretçi aynı sayfaya bir sonraki gelişinde bir hoş geldiniz mesajı alacaktır.
Örnek olarak 3 JavaScript işlevi oluşturacağız:
Çerez değerini ayarlama işlevi
Çerez değeri elde etmek için bir işlev
Çerez değerini kontrol eden bir işlev
Öncelikle ziyaretçinin adını bir çerez değişkeninde saklayan bir işlev oluşturuyoruz:
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=/";
}Örnek açıklaması:
Yukarıdaki işlevin parametreleri çerezin adı (cname), çerezin değeridir (cvalue) ve çerezin süresinin dolması gereken gün sayısı (exdays).
İşlev, çerez adını, çerez adını toplayarak bir çerez ayarlar. değer ve süresi dolan dize.
Ardından, belirtilen çerezin değerini döndüren bir işlev oluştururuz:
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 "";
}İşlev açıklaması:
Çerez adını parametre (cname) olarak alın.
Aranacak metni (cname + "=") içeren bir değişken (ad) oluşturun.
Özel karakterlere sahip çerezleri işlemek için çerez dizisinin kodunu çözün; '$'
document.cookie'yi noktalı virgüllerle ca (ca = decodedCookie.split(';')).
Ca dizisinde döngü yapın (i=0; i < ca.length; i++) ve her değeri okuyun c=ca[i]).
Çerez bulunursa (c.indexOf(name) == 0), çerezin değerini döndürün (c.substring(ad.uzunluk, c.uzunluk).
Çerez bulunamazsa "" değerini döndürün.
Son olarak bir çerezin ayarlanıp ayarlanmadığını kontrol eden fonksiyonu oluşturuyoruz.
Çerez ayarlanmışsa bir karşılama mesajı görüntüleyecektir.
Çerez ayarlanmamışsa, kullanıcının adını soran bir bilgi kutusu görüntülenecektir. ve setCookie işlevini çağırarak kullanıcı adı çerezini 365 gün boyunca saklar:
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);
}
}
}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);
}
}
}Kendiniz Deneyin →
<!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>
Yukarıdaki örnek, sayfa yüklendiğinde checkCookie() işlevini çalıştırır.