Sobes.tech
Junior

Cookies, sessionStorage ve localStorage arasındaki farkı açıklayın.

sobes.tech yapay zeka

AI'dan gelen yanıt

Cookies, sessionStorage ve localStorage, amaç, kullanım süresi ve depolanan veri hacmine göre farklılık gösteren web depolama mekanizmalarıdır.

  • Cookies: Web sunucusu tarafından gönderilen ve kullanıcının tarayıcısında saklanan küçük veri parçacıklarıdır. Aynı sunucuya yapılan sonraki her istekte gönderilirler. Kimlik doğrulama, kullanıcı tercihleri saklama, alışveriş sepeti durumunu izleme gibi amaçlar için kullanılırlar.

    • Ömür: Oluşturulurken belirlenir (oturum süresi veya belirli bir son kullanma tarihi olabilir).
    • Hacim: Sınırlıdır, genellikle birkaç kilobayt (yaklaşık 4 KB).
  • sessionStorage: Sadece bir oturum boyunca (açık sekme veya pencere) veri saklar. Sekme veya pencere kapatıldığında veriler silinir.

    • Ömür: Tarayıcı sekmesi veya penceresi kapatılana kadar.
    • Hacim: Çoğu zaman cookie'lerden çok daha fazladır (genellikle birkaç megabayt).
  • localStorage: Süresiz veri saklar, kullanıcı veya script tarafından açıkça silinene kadar. Aynı alan adındaki tüm sekmeler ve pencerelerde erişilebilir.

    • Ömür: Kalıcı (açıkça silinene kadar).
    • Hacim: Çoğu zaman cookie'lerden çok daha fazladır (genellikle birkaç megabayt).

İşte kısa bir karşılaştırma:

Mekanizma Ömür Erişilebilirlik Sunucuya Gönderilir Hacim (tipik) Amaç
Cookies Oturum veya son kullanma süresi HTTP başlıklarıyla Evet ~4 KB Kimlik doğrulama, izleme, tercihler
sessionStorage Sekme veya pencere kapatılana kadar JS API üzerinden Hayır ~5-10 MB Oturum verilerinin geçici saklanması
localStorage Süresiz (silinene kadar) JS API üzerinden Hayır ~5-10 MB Uzun vadeli veri saklama

JavaScript API kullanımı örnekleri:

// Cookies (document.cookie üzerinden erişilir, manuel ayrıştırma ve seri hale getirme gerekir)
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// sessionStorage
sessionStorage.setItem('id', '123');
let userId = sessionStorage.getItem('id');
sessionStorage.removeItem('id');

// localStorage
localStorage.setItem('theme', 'dark');
let userTheme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear(); // Tüm localStorage verilerini temizler