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