Cookie, Local Storage ve Session Storage Arasındaki Farklar

Cookie, Local Storage ve Session Storage Arasındaki Farklar

Bir web sitesi girişinizi hatırlıyor, tema tercihinizi saklıyor veya formu yanlışlıkla kapattığınızda taslağı geri getiriyor. Bunların hepsi tarayıcıda bir şeyler saklamakla ilgili olabilir. Ancak cookie, localStorage ve sessionStorage aynı amaçla tasarlanmamıştır.

En kısa ayrım şu: Cookie HTTP isteklerine bağlanabilen küçük bir veri parçasıdır. localStorage aynı origin için tarayıcı oturumları boyunca kalan bir anahtar-değer deposudur. sessionStorage ise aynı origin'e ek olarak belirli bir sekmenin oturumuyla sınırlıdır. Hangisini seçeceğiniz verinin ne kadar kalacağına, sunucuya gönderilip gönderilmeyeceğine ve hassasiyetine bağlıdır.

Önce Temel Farkı Görelim

Origin; protokol, alan adı ve port birleşimidir. Örneğin https://example.com ile http://example.com Web Storage açısından farklı origin'lerdir. Cookie kapsamı ise Domain, Path ve diğer bayraklarla ayrı kurallara göre belirlenir.

Cookie Nedir, Nasıl Çalışır?

Sunucu bir HTTP yanıtında Set-Cookie gönderebilir. Tarayıcı bunu saklar ve koşulları karşılayan sonraki isteklere Cookie başlığını ekler. Böylece her isteğin bağımsız olduğu HTTP üzerinde kullanıcı oturumu sürdürülebilir.

Görsel: Google Privacy Sandbox, HTTP cookie alışverişi. Kaynak: Privacy Sandbox.

HTTP/1.1 200 OK
Set-Cookie: session=opaque-id; Path=/; HttpOnly; Secure; SameSite=Lax

// Sonraki uygun istek:
GET /account HTTP/1.1
Cookie: session=opaque-id

Bu örnekte HttpOnly çerezi document.cookie erişiminden korur; Secure iletimini HTTPS ile sınırlar; SameSite=Lax ise bazı siteler arası isteklerde gönderilmesini kısıtlar. Bu bayraklar tek başına tüm saldırıları çözmez. Cookie ile kimlik doğrulayan uygulamalar CSRF riskini ve oturum sonlandırma davranışını ayrıca tasarlamalıdır.

Cookie yalnızca oturum için kullanılmaz: dil tercihi veya analitik amacıyla da kullanılabilir. Ancak büyük miktarda uygulama verisi saklamak için uygun değildir; boyut ve sayı sınırları vardır ve eşleşen isteklere eklenmesi gereksiz ağ yükü oluşturabilir. Süre belirtilmeyen session cookie'nin tarayıcı kapanınca her zaman kesin silindiğini varsaymayın; tarayıcı oturum geri yükleme davranışı etkileyebilir.

localStorage Nedir?

localStorage, origin bazında anahtar-değer saklar. Veriler dize olarak tutulur, sayfa yenilense veya tarayıcı yeniden açılsa da genellikle kalır. Belirli bir süre sonra kendiliğinden silinme ayarı yoktur; kullanıcı tarayıcı verisini silebilir, özel gezinme veya depolama politikaları erişimi sınırlayabilir.

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme") ?? "light";
localStorage.removeItem("theme");

const preferences = { theme: "dark", compact: true };
localStorage.setItem("preferences", JSON.stringify(preferences));

try {
  const saved = JSON.parse(localStorage.getItem("preferences") ?? "{}");
  console.log(saved.theme);
} catch {
  console.log("Kayıtlı tercih okunamadı");
}

Tercih, son kullanılan görünüm veya hassas olmayan küçük ayarlar için uygundur. localStorage'da oturum token'ı saklamak genellikle risklidir: origin üzerinde çalışan JavaScript bu veriyi okuyabilir; XSS açığı oluşursa kötü amaçlı kod da okuyabilir. Tarayıcı depolaması hiçbir zaman güvenli bir kasa değildir.

İşlemler senkrondur; büyük veriyi sık sık okuyup yazmak ana iş parçacığını meşgul edebilir. Kapsamlı çevrimdışı veri için IndexedDB gibi farklı bir depolama çözümü düşünülmelidir.

sessionStorage Nedir?

sessionStorage aynı kullanım arayüzüne sahiptir, fakat origin ve sekme oturumu bazında ayrılır. Sayfayı yenilemek veriyi silmez; sekme kapandığında o sekmenin session verisi sona erer. Yeni bir sekme normalde kendi depolama alanını kullanır; bazı açılış biçimlerinde ilk veri açan sekmeden kopyalanabilir, sonrasında iki sekme birbirinden bağımsızdır.

sessionStorage.setItem("checkout-step", "shipping");
const step = sessionStorage.getItem("checkout-step") ?? "cart";
sessionStorage.removeItem("checkout-step");

Tek sekmede sürdürülen geçici form adımı veya bir oturumluk UI taslağı için elverişlidir. Fakat sessionStorage, session cookie ile aynı şey değildir: biri JavaScript Web Storage alanıdır; diğeri sunucu isteklerine eklenebilen HTTP çerezidir.

Üç Gerçek Senaryoda Hangisini Seçelim?

1. Giriş oturumu: Sunucunun yönettiği opak oturum kimliği, uygun şekilde yapılandırılmış HttpOnly; Secure; SameSite cookie ile taşınabilir. Kimlik doğrulama tasarımı yalnızca saklama yeri seçimiyle bitmez.
2. Koyu tema tercihi: Kullanıcı tekrar geldiğinde de görünmesini istiyorsanız localStorage pratik bir seçenektir. İlk render sırasında tema tutarlılığını ayrıca düşünün.
3. Sekmeye özel form taslağı: Sekme kapanınca kaybolması kabul edilebiliyorsa sessionStorage kullanabilirsiniz. Önemli taslaklar için sunucuya kaydetme gerekebilir.

Güvenlik ve Yanlış Bilinenler

• “sessionStorage güvenlidir, çünkü kapanınca silinir”: Yanlış. Sayfadaki JavaScript oturum açıkken içeriğini okuyabilir.
• “HttpOnly cookie XSS'i tamamen engeller”: Yanlış. Cookie'nin JS tarafından okunmasını engeller; sayfadaki kötü niyetli kodun başka zararlar vermesini otomatik önlemez.
• “Cookie her istekte gider”: Eksik. Yalnızca domain, path, SameSite, Secure ve istek bağlamı gibi koşullar karşılanırsa gönderilir.
• “localStorage kalıcı veritabanıdır”: Yanlış. Kullanıcı ve tarayıcı politikaları veriyi kaldırabilir; kritik verinin tek kopyası olmamalıdır.
• “Cookie ile storage aynı limitlere sahiptir”: Yanlış. Kotalar ve davranışlar tarayıcıya ve depolama türüne göre değişir; sabit kapasite varsaymayın.

Sonuç

Seçimi “hangi API daha kolay?” sorusuyla değil, veri sunucuya gitmeli mi, ne kadar yaşamalı, sekmeler arasında paylaşılmalı mı ve ne kadar hassas? sorularıyla yapın. Oturum çerezi, tema tercihi ve geçici form taslağı üç ayrı ihtiyacı temsil eder. Doğru saklama yöntemi, uygulamanın beklenen davranışını daha anlaşılır ve güvenli kılar.

Kaynaklar

• MDN: Using HTTP cookies
• MDN: Web Storage API
• MDN: sessionStorage
• MDN: Secure cookie configuration