Web uygulamalarının geliştirilmesi sırasında kullanılan HTML Web Storage API, tarayıcıda veri saklamak ve bu verilere erişmek için kullanılan güçlü bir araçtır. Bu yazıda, HTML Web Storage API’nın temel kavramlarını ve örnek kod bloklarını inceleyeceğiz.
Web Storage Nedir?
Web Storage, tarayıcıda veri saklama kapasitesi sağlayan bir API’dir. İki ana türü bulunur: LocalStorage ve SessionStorage. Her ikisi de benzer kullanım özelliklerine sahiptir, ancak yaşamları ve erişim kapsamları farklıdır.
LocalStorage Kullanımı
LocalStorage, tarayıcı kapatıldıktan sonra bile verilerin saklanmasını sağlar. Bu, tarayıcı penceresi veya sekmesi kapatıldığında bile verilerin korunduğu anlamına gelir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocalStorage Örneği</title>
</head>
<body>
<script>
// Veri kaydetme
localStorage.setItem('kullaniciAdi', 'JohnDoe');
// Veri okuma
const kullaniciAdi = localStorage.getItem('kullaniciAdi');
console.log('Kullanıcı Adı:', kullaniciAdi);
// Veri silme
localStorage.removeItem('kullaniciAdi');
</script>
</body>
</html>
SessionStorage Kullanımı
SessionStorage, tarayıcı penceresi veya sekmesi açık olduğu sürece verileri saklar. Tarayıcı kapatıldığında bu veriler silinir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SessionStorage Örneği</title>
</head>
<body>
<script>
// Veri kaydetme
sessionStorage.setItem('sessionToken', 'abc123');
// Veri okuma
const sessionToken = sessionStorage.getItem('sessionToken');
console.log('Session Token:', sessionToken);
// Veri silme
sessionStorage.removeItem('sessionToken');
</script>
</body>
</html>
Veri Güvenliği
LocalStorage ve SessionStorage, tarayıcı tarafından sunulan araçlardır ve bu nedenle hassas verilerin güvenliği açısından dikkatli kullanılmalıdır. Kullanıcı kimlik bilgileri veya diğer özel veriler için daha güvenli alternatifler düşünülmelidir.
Sonuç
HTML Web Storage API, tarayıcıda veri saklama ve erişme yetenekleri sunan kullanışlı bir araçtır. Ancak, bu veri depolama yöntemlerinin sınırlamalarını ve güvenlik konularını anlamak önemlidir. Bu örnekler, temel kullanımları göstermektedir, ancak gerçek uygulamalarda daha karmaşık senaryolar da ele alınmalıdır.