Yükleniyor...

HTML Web Depolama

HTML Web Depolama, web uygulamalarında kullanıcı verilerini tarayıcıda saklamayı sağlayan önemli bir teknolojidir. Geleneksel çerezlere göre daha fazla veri depolama kapasitesi sunar ve kullanıcı deneyimini geliştirmek için hızlı erişim imkanı sağlar. Kişisel web sitelerinde, bloglarda, e-ticaret platformlarında ve haber sitelerinde kullanıcı tercihlerini, oturum bilgilerini veya sepet verilerini saklamak için idealdir. Bu teknoloji, verileri sunucuya göndermeden doğrudan istemci tarafında tutar ve sayfa yenilense bile veriler kaybolmaz.
HTML Web Depolama’yı, bir ev inşası gibi düşünebiliriz: Temel yapıyı (verileri) sağlam kurup, odaları (uygulama özellikleri) kişiselleştirmek için düzenleriz. Ya da bir mektup yazarken bilgilerimizi organize etmek gibi; her veri, belirli bir anahtar altında düzenli ve erişilebilir olur. Bu eğitimde, localStorage ve sessionStorage kullanarak verileri nasıl saklayacağınızı, erişeceğinizi ve yönetebileceğinizi öğreneceksiniz. Ayrıca sık yapılan hatalardan nasıl kaçınacağınızı ve performansı nasıl artıracağınızı keşfedeceksiniz.

Temel Örnek

html

HTML Code

<!DOCTYPE html>

<html>
<head><title>Web Depolama Demo</title></head>
<body>
<input id="isim" placeholder="Adınızı yazın">
<button onclick="kaydet()">Kaydet</button>
<button onclick="yükle()">Yükle</button>
<p id="mesaj"></p>
<script>
// Save data to localStorage
function kaydet() {
const ad = document.getElementById('isim').value;
localStorage.setItem('kullaniciAdi', ad);
}
// Load data from localStorage
function yükle() {
const isim = localStorage.getItem('kullaniciAdi');
document.getElementById('mesaj').textContent = isim ? `Merhaba, ${isim}!` : 'Kayıtlı isim yok.';
}
</script>
</body>
</html>

Yukarıdaki kodda temel olarak localStorage kullanılarak veri saklama ve geri yükleme işlemleri gösterilmiştir. Kullanıcı "Kaydet" butonuna tıkladığında, input alanındaki değer localStorage’a 'kullaniciAdi' anahtarı ile kaydedilir. "Yükle" butonunda ise localStorage’dan bu veri getirilip sayfada gösterilir. localStorage.setItem() ve getItem() metodları sırasıyla veri kaydetme ve veri okuma için kullanılır.
localStorage, verileri string olarak saklar; bu nedenle nesneler JSON.stringify ile stringe dönüştürülmelidir. Burada basit bir metin saklama örneği mevcut. localStorage’da tutulan veriler tarayıcı kapansa bile kalıcıdır. Bu, kullanıcıların web sitenize tekrar geldiğinde önceki ayarlarının ve tercihlerin hatırlanmasını sağlar. Ancak localStorage kapasitesi sınırlıdır (genellikle 5MB civarı) ve güvenlik açısından hassas veriler saklanmamalıdır.
Beginners bazen localStorage’un sadece string veri sakladığını unutabilir ve nesneleri doğrudan kaydetmeye çalışabilirler, bu hata oluşturur. Ayrıca, sessionStorage kullanımı da önemlidir; bu veriler sadece sekme açık kaldığı sürece tutulur.

Pratik Örnek

html

HTML Code

<!DOCTYPE html>

<html>
<head><title>Alışveriş Sepeti</title></head>
<body>
<h3>Sepetiniz</h3>
<ul id="sepetListe"></ul>
<input id="urun" placeholder="Ürün ekle">
<button onclick="urunEkle()">Ekle</button>
<button onclick="sepetiTemizle()">Sepeti Temizle</button>
<script>
const sepetKey = 'alisverisSepeti';

function urunEkle() {
let sepet = JSON.parse(localStorage.getItem(sepetKey)) || \[];
const urun = document.getElementById('urun').value.trim();
if (urun) {
sepet.push(urun);
localStorage.setItem(sepetKey, JSON.stringify(sepet));
listeGuncelle();
}
}

function listeGuncelle() {
const sepet = JSON.parse(localStorage.getItem(sepetKey)) || \[];
const liste = document.getElementById('sepetListe');
liste.innerHTML = '';
sepet.forEach(urun => {
const li = document.createElement('li');
li.textContent = urun;
liste.appendChild(li);
});
}

function sepetiTemizle() {
localStorage.removeItem(sepetKey);
listeGuncelle();
}

listeGuncelle(); </script>

</body>
</html>

Bu pratik örnek, e-ticaret sitelerinde sık kullanılan bir alışveriş sepeti senaryosunu göstermektedir. Kullanıcı bir ürün eklediğinde, mevcut sepet JSON formatında localStorage’dan okunur, yeni ürün eklenir, tekrar JSON.stringify ile stringe dönüştürülüp saklanır. Böylece sayfa yenilense dahi sepet içeriği korunur.
listeGuncelle fonksiyonu, güncel sepeti DOM’a yansıtır. Kullanıcı “Sepeti Temizle” butonuna bastığında ise localStorage’daki sepet verisi silinir ve liste boşalır.
Bu yöntem, kişisel web sitelerinde kullanıcı tercihlerini, bloglarda okuma listelerini veya haber sitelerinde favori makaleleri saklamak için uygundur. Dikkat edilmesi gereken husus, büyük veri veya hassas bilgiler için uygun olmadığının bilinmesidir.

En İyi Uygulamalar ve Yaygın Hatalar
Semantik HTML kullanmak, erişilebilirliği artırır ve verilerin anlamlı biçimde organize edilmesini sağlar. Kod yapısını temiz ve modüler tutmak, bakım ve geliştirmeyi kolaylaştırır. LocalStorage kullanırken veri tiplerinin doğru yönetilmesi, yani nesnelerin JSON ile serileştirilmesi zorunludur.
Yaygın hatalar arasında, HTML elemanlarının yanlış kullanımı, gerekli attribute’ların eksikliği ve HTML etiketlerinin uygunsuz iç içe yerleştirilmesi yer alır. Ayrıca, localStorage’u aşırı kullanmak veya çok büyük veriler depolamaya çalışmak performansı olumsuz etkiler.
Debug aşamasında, tarayıcıların geliştirici araçları kullanılarak localStorage ve sessionStorage’daki veriler kontrol edilmelidir. Hataları önlemek için try-catch blokları eklemek ve veri varlığını kontrol etmek faydalıdır.

Özet ve Sonraki Adımlar
HTML Web Depolama, modern web uygulamalarında veri yönetimini kolaylaştıran güçlü bir araçtır. Kullanıcı verilerini hızlı ve kalıcı şekilde saklayarak daha dinamik ve kişiselleştirilmiş deneyimler oluşturabilirsiniz. Bu beceri, CSS ile stil ve JavaScript ile etkileşim katmanlarıyla birleştiğinde, tamamen işlevsel uygulamalar geliştirmeye olanak tanır.
Sonraki aşamalarda, IndexedDB gibi daha karmaşık ve büyük veri depolama yöntemlerini öğrenmek, güvenlik uygulamalarını keşfetmek ve frontend-backend veri senkronizasyonu üzerine çalışmak faydalı olacaktır. Düzenli uygulamalar yaparak ve gerçek dünya projelerinde kullanarak bu bilgileri pekiştirebilirsiniz.

🧠 Bilginizi Test Edin

Başlamaya Hazır

Quiz

Challenge yourself with this interactive quiz and see how well you understand the topic

❓

Sorular

🎯

70%

Geçmek İçin

♾️

∞

Süre

🔄

∞

Deneme

📝 Talimatlar

Her soruyu dikkatle okuyun
Her soru için en iyi cevabı seçin
Quiz'i istediğiniz kadar tekrar alabilirsiniz
İlerlemeniz üstte gösterilecek

Dil