JavaScript Web Storage Rehberi: LocalStorage vs SessionStorage ve Kritik Güvenlik İpuçları 💾📦🛡️

Serhat İsmail Zunluoğlu

4 min read

·

Jan 11, 2026

--

Share

Press enter or click to view image in full size

Frontend dünyasında geçirdiğim yıllar bana şunu öğretti: Kullanıcıyı “hatırlamak” (tema tercihi, sepet durumu vs.) iyi bir deneyimin olmazsa olmazı. Eskiden bu basit ihtiyaçlar için bile sürekli Cookie’lerle (çerezler) boğuşmak zorunda kalınırdı. Neyse ki HTML5 ile hayatımıza giren Web Storage API oyunu değiştirdi ve bize çok daha yetenekli iki yeni araç sundu: localStorage ve sessionStorage.

Bu yazıda bu ikilinin farklarını, projelerimde nasıl kullandığımı, hangi verilerin buralarda saklanmaması gerektiğini ve güvenlik açısından neleri asla yapmamanız gerektiğini anlatacağım. 🤓 😁

Temel Fark Nedir? 🔍️

Mantık aslında çok basit: Her iki yöntem de veriyi key: value çiftleri halinde tutuyor. Yani çalışma prensipleri aynı. Peki fark nerede? Tam olarak şu iki soruda yolları ayrılıyor: Veri ne zaman silinecek (Lifespan) ve bu veriye hangi sekmelerden erişilebilecek (Scope):

1. localStorage (Kalıcı Depolama) 💾 ♾️

• Yaşam Döngüsü: Sonsuzdur, tarayıcı penceresi kapatılsa, bilgisayar yeniden başlatılsa bile veriler silinmez. Kullanıcı veya uygulama kodunuz özellikle silene kadar orada kalır.
• Kullanım Alanı: “Beni hatırla” özellikleri, site teması (Dark/Light mode) tercihleri, sepete atılan ürünlerin korunması.
• Sekmeler Arası Senkronizasyon (Burası Çok Havalı!): Kullanıcı bir sekmede sepete ürün attığında veya temayı değiştirdiğinde, diğer açık sekmelerin de anında (sayfa yenilenmeden) güncellenmesini sağlamak.

2. sessionStorage (Oturum Bazlı Depolama) 🕒 📦

• Yaşam Döngüsü: Geçicidir, sadece o tarayıcı sekmesi (tab) veya penceresi açık kaldığı sürece yaşar. Sekme kapatıldığında veriler otomatik olarak silinir.
• Kullanım Alanı: Tek seferlik form verileri, bankacılık işlemleri sırasında sayfa yenilendiğinde verinin kaybolmaması gereken durumlar.
• Sekmeler Arası Tam İzolasyon (Karışıklığa Son!): localStorage'ın aksine, burada sekmeler birbirine "küstür", asla konuşmazlar. Bu harika bir şeydir çünkü kullanıcı bir sekmede "İstanbul" otellerini filtrelerken, yan sekmede "İzmir" otellerine bakabilir. İzolasyon sayesinde iki arama birbirine karışmaz; her sekme kendi verisini, kendi hafızasında güvenle tutar.

Karşılaştırma Tablosu 📊

Press enter or click to view image in full size

Temel Metotlar ve Kullanım Şekli 📘

Bir frontend geliştirici olarak Web Storage API’nin en sevdiğim yanı, her iki yapının da (Local ve Session) aynı Storage arayüzünü paylaşmasıdır. Yani birinin söz dizimini (syntax) öğrendiğinizde, diğerini de otomatik olarak öğrenmiş oluyorsunuz.

Kod tarafında tek fark, başına localStorage mı yoksa sessionStorage mı yazdığınızdır. İşte projelerimde elimiz ayağımız olan o 4 temel metot:

• setItem(key, value): Veriyi eklemek veya var olanı güncellemek için kullanılır.
• getItem(key): Saklanan veriyi okumak için kullanılır (Veri yoksa null döner).
• removeItem(key): Sadece belirlediğiniz anahtara sahip veriyi siler.
• clear(): Tüm depolama alanını temizler (Dikkatli kullanın!).

💡 Kritik Not: Her iki yapı da verileri sadece String (metin) olarak saklar. Eğer bir Object veya Array saklamaya çalışırsanız, veriniz bozulup "[object Object]" haline gelecektir. Bu yüzden kaydederken JSON.stringify(), okurken ise JSON.parse() kullanmak bir tercih değil, zorunluluktur.

Güvenlik Notları (En Önemli Kısım) 🚨

Web Storage kullanımı çok kolaydır, bu yüzden geliştiriciler bazen güvenlik risklerini göz ardı ederler. İşte unutmamanız gerekenler:

1. Asla Hassas Veri Saklamayın ⚠️

Web Storage (hem local hem session), tarayıcıda çalışan herhangi bir JavaScript kodu tarafından okunabilir. Bu, uygulamanızda bir XSS (Cross-Site Scripting) açığı varsa, saldırganın tek satırlık bir kodla tüm storage verisini çalabileceği anlamına gelir.

ASLA Şunları Saklamayın:

• Kullanıcı şifreleri
• Kredi kartı bilgileri
• Kişisel sağlık verileri veya T.C. Kimlik numaraları
• API Key veya Secret Key’ler

2. JWT (JSON Web Token) Saklama İkilemi 🔐

Birçok geliştirici, Authentication (Kimlik Doğrulama) için kullanılan JWT’leri localStorage içinde saklar.

• Risk: Eğer sitenizde XSS açığı varsa, saldırgan token’ı çalıp kullanıcı adına işlem yapabilir.
• Çözüm: En güvenli yöntem, token’ları HttpOnly Cookie içinde saklamaktır. HttpOnly cookie'lere JavaScript ile erişilemez, bu da XSS saldırılarına karşı tam koruma sağlar.

3. Veri Bütünlüğü Yoktur 🛡️

Kullanıcılar, tarayıcının “Geliştirici Araçları”nı (F12) açıp localStorage içindeki verileri manuel olarak değiştirebilirler.

• Örnek: isAdmin: false değerini isAdmin: true yapabilirler.
• Önlem: Frontend tarafındaki kontrollere asla güvenmeyin. Kritik yetki kontrollerini her zaman Backend tarafında yapın.

Sonuç: Hangisini Seçmeliyim? 🧐

• Eğer verinin kullanıcı siteye tekrar geldiğinde de orada olmasını istiyorsanız (Tema, dil seçimi, taslak metinler): localStorage.
• Eğer verinin sadece o anki işlem bitene kadar yaşamasını istiyorsanız (Filtreleme seçenekleri, geçici formlar): sessionStorage.
• Eğer veri hassas ise (Şifre, Token, Kimlik): Hiçbiri.

Doğru aracı doğru yerde kullanmak, hem kullanıcı deneyimini hem de uygulamanızın güvenliğini garanti altına alır.

Unutmayın, iyi bir frontend geliştirici sadece arayüzü güzelleştiren değil, aynı zamanda kullanıcısının verisini koruyan kişidir. Web Storage API, doğru ellerde harika bir UX (Kullanıcı Deneyimi) aracıdır; ancak dikkatsiz ellerde ciddi bir güvenlik açığına dönüşebilir.

Tecrübelerinizi ve eklemek istediğiniz güvenlik ipuçlarını yorumlarda benimle paylaşırsanız çok sevinirim, bilgi paylaştıkça çoğalır. Şimdiden çok teşekkür ediyorum, takipte kalmayı unutmayınnn… 😄😊🧡

Frontend Developer | Computer Engineer | Serhat İsmail Zunluoğlu