Modern JavaScript ile birlikte gelen Web Storage API, geliştiricilere verileri kullanıcının tarayıcısında kolayca saklama imkânı sunar. Bu API iki ana yapıdan oluşur: LocalStorage ve SessionStorage. Her ikisi de key-value (anahtar-değer) çifti olarak veri saklamanızı sağlar, fakat saklama süresi ve kapsamları bakımından farklılık gösterir.
Bu yazıda, JavaScript localStorage ve sessionStorage kullanımı hakkında detaylı bilgi, örnek kodlar ve en iyi pratikleri bulacaksınız.
LocalStorage Nedir?
LocalStorage, verileri kullanıcı tarayıcısında süresiz olarak saklar. Tarayıcı kapatılsa bile veriler silinmez, kullanıcı manuel olarak silmedikçe kalıcıdır.
Kullanım:
// Veri ekleme
localStorage.setItem('kullaniciAdi', 'furkan');
// Veri çekme
let isim = localStorage.getItem('kullaniciAdi');
// Veri silme
localStorage.removeItem('kullaniciAdi');
// Tüm verileri temizleme
localStorage.clear();
Avantajları:
- Sayfalar arasında veri paylaşımı sağlar
- Oturumlar arası kalıcılık sunar
- Anahtar-değer yapısı sayesinde kolay veri erişimi sağlar
SessionStorage Nedir?
SessionStorage, verileri sadece mevcut sekme/oturum boyunca saklar. Tarayıcı sekmesi kapatıldığında veriler otomatik olarak silinir. Bu nedenle, geçici veri saklamak için idealdir.
Kullanım:
// Veri ekleme
sessionStorage.setItem('tema', 'koyu');
// Veri çekme
let tema = sessionStorage.getItem('tema');
// Veri silme
sessionStorage.removeItem('tema');
// Tüm verileri temizleme
sessionStorage.clear();
Avantajları:
- Güvenlidir, başka sekmelerden erişilemez
- Geçici veri saklamak için idealdir
- Hızlı ve kolaydır
LocalStorage ve SessionStorage Arasındaki Farklar
| Özellik | LocalStorage | SessionStorage |
|---|---|---|
| Kalıcılık Süresi | Tarayıcı kapatılsa da kalır | Sekme kapanınca silinir |
| Erişim Alanı | Tüm sekmelerde geçerli | Sadece açık sekmede geçerli |
| Veri Kapasitesi | ~5-10MB (tarayıcıya göre) | ~5MB |
| Kullanım Durumu | Kalıcı veriler (token, tercih) | Geçici veriler (formlar) |
Veri Saklarken Nelere Dikkat Etmelisiniz?
- Gizli bilgi (şifre, token) saklamayın: Web Storage verileri kullanıcı tarafından erişilebilir. Güvenli veri saklamak için cookies + HTTPS veya sunucu taraflı veritabanları tercih edilmelidir.
- Verileri JSON.stringify ile saklayın: Nesne veya dizi saklamak isterseniz, önce string’e çevirmelisiniz.
let sepet = ["ürün1", "ürün2"];
localStorage.setItem("sepet", JSON.stringify(sepet));
- Verileri JSON.parse ile okuyun:
let veri = JSON.parse(localStorage.getItem("sepet"));
javascript localstorage ve sessionstorage kullanımı
Web projelerinde kullanıcı tercihlerini hatırlamak, oturumları yönetmek veya form verilerini geçici olarak saklamak istiyorsanız JavaScript localStorage ve sessionStorage mükemmel araçlardır. Özellikle Single Page Application (SPA) yapılarında çokça kullanılırlar.
Kullanımı oldukça basittir ve performans dostudur. Ancak hassas veri saklamaktan kaçınmalı, gerektiğinde şifreleme yöntemleri kullanılmalıdır.
Sık Sorulan Sorular
LocalStorage kalıcı mı?
Evet, kullanıcı silmediği sürece kalıcıdır. Tarayıcı kapansa bile veriler kalır.
SessionStorage ne zaman silinir?
Tarayıcı sekmesi kapandığında tüm sessionStorage verileri otomatik olarak silinir.
SessionStorage ile LocalStorage aynı anda kullanılabilir mi?
Evet, farklı ihtiyaçlar için aynı projede birlikte kullanılabilirler.
Web Storage güvenli mi?
Hayır, client-side (istemci taraflı) olduğu için hassas bilgiler saklanmamalıdır.
Veri kapasitesi ne kadar?
Çoğu tarayıcıda localStorage için 5–10MB, sessionStorage için ~5MB sınırlama vardır.
Web Storage tarayıcı uyumlu mu?
Evet, modern tüm tarayıcılarda desteklenir (IE8 ve sonrası dahil).
Sonuç
JavaScript’in Web Storage API’si sayesinde kullanıcıyla daha etkileşimli ve özelleştirilmiş deneyimler sunmak mümkün hale geliyor. LocalStorage ve SessionStorage, basit ama güçlü yapılar sunar. Doğru senaryolarda kullanıldığında uygulamalarınıza esneklik ve hız kazandırır.
