Cookies (Çerezler): JavaScript ile Çerez Oluşturma ve Okuma

crazy_coder

Moderatör
Katılım
20 Şub 2026
Mesajlar
204
Tepkime puanı
0
Puanları
16

1. Çerez (Cookie) Nedir?​


Çerezler, web sunucularının tarayıcıya bıraktığı küçük metin dosyalarıdır. Local Storage'dan en büyük farkı, her HTTP isteğiyle birlikte sunucuya otomatik olarak gönderilmeleridir. Bu özellikleri, sunucunun kullanıcıyı tanımasını sağlar (örneğin "Beni Hatırla" seçeneği).

2. JavaScript ile Çerez Oluşturma​


JavaScript'te çerezler document.cookie özelliği üzerinden yönetilir. Bir çerez oluştururken sadece anahtar ve değer değil, çerezin ne kadar süre yaşayacağını ve hangi yollarda geçerli olacağını da belirleyebiliriz.

Temel Çerez Oluşturma:
JavaScript:
// En basit haliyle (Tarayıcı kapanınca silinir - Session Cookie)
document.cookie = "kullanici=AhmetYilmaz";

// Süreli çerez (Expires veya Max-Age ile)
// 7 gün sonra silinecek bir çerez:
document.cookie = "dil=TR; max-age=" + (60 * 60 * 24 * 7) + "; path=/";


  • []max-age: Saniye cinsinden yaşam süresi.
    []path: Çerezin hangi sayfalarda geçerli olacağı (Genelde / kullanılır).
    []secure: Sadece HTTPS üzerinden gönderilmesini sağlar.
    []SameSite: Üçüncü taraf takibini kısıtlamak için (Strict veya Lax).

3. Çerezleri Okuma ve Ayıklama​


Çerezleri okumak, yazmak kadar kolay değildir. document.cookie dediğinizde size tüm çerezleri tek bir string (metin) olarak döner: "user=Ahmet; tema=dark; dil=TR". Bu metni ayıklamak (parse etmek) gerekir.

Pratik Bir Çerez Okuma Fonksiyonu:
JavaScript:
function cerezOku(isim) {
let ad = isim + "=";
let cerezDizisi = document.cookie.split(';'); // Çerezleri ayır

for(let i = 0; i < cerezDizisi.length; i++) {
    let c = cerezDizisi[i].trim(); // Boşlukları temizle
    if (c.indexOf(ad) == 0) {
        return c.substring(ad.length, c.length);
    }
}
return "";

}

console.log(cerezOku("kullanici")); // Çıktı: AhmetYilmaz

4. Çerez Silme İşlemi​


JavaScript'te bir çerezi silmek için özel bir delete komutu yoktur. Bir çerezi silmenin yolu, onun süresini geçmiş bir tarihe ayarlamaktır.

JavaScript:
// "kullanici" çerezini silmek için max-age değerini 0 yapıyoruz
document.cookie = "kullanici=; max-age=0; path=/";

Local Storage vs Cookies: Hangisini Seçmeli?​


ÖzellikCookies (Çerezler)Local StorageKapasite4 KB (Çok küçük)5-10 MB (Geniş)
Sunucu ErişimiOtomatik gönderilirSadece istemci tarafında
GüvenlikHttpOnly ile korunabilirXSS'e daha açıktır
Kullanım AmacıOturum yönetimi, auth tokenTema, sepet, kullanıcı ayarları

[TR]

Önemli Güvenlik Notu: HttpOnly ve XSS​


JavaScript ile oluşturulan her çereze, kötü niyetli scriptler de erişebilir. Ancak, sunucu tarafında (PHP, Node.js vb.) bir çereze HttpOnly bayrağı eklenirse, o çereze JavaScript üzerinden asla erişilemez. Bu, oturum bilgilerini çalmaya yönelik XSS saldırılarına karşı en büyük savunmadır.



Sonuç

Çerezler, kısıtlı kapasitelerine rağmen modern web'in bel kemiğidir. JavaScript ile çerez yönetimi biraz "eski usul" kalsa da, sunucuyla senkronize çalışması gereken veriler için hala tek seçenektir.
 
Geri
Üst