İnternette gezinirken bir e-ticaret sitesinde sepetinize ürün ekleyip sekmeyi kapattığınızı, saatler sonra siteye tekrar girdiğinizde o ürünlerin hala sepette durduğunu mutlaka fark etmişsinizdir. Ya da bir haber sitesinde “Karanlık Mod” (Dark Mode) seçeneğini açtığınızda, sayfayı yenileseniz bile o ayarın korunduğunu görmüşsünüzdür. Peki, sunucuya (backend) giriş yapmadığınız halde web tarayıcıları bu bilgileri nasıl aklında tutuyor?
İşte bu noktada karşımıza modern web geliştirmenin vazgeçilmez araçları olan Web Storage API (LocalStorage ve SessionStorage) çıkıyor. Akıllı web siteleri yapabilme yeteneğinizi artıracak olan bu harika ve eğlenceli konuyu, ilk defa öğrenenler için bol örnekle ve tüm detaylarıyla inceleyeceğiz.
1. LocalStorage Nedir?
LocalStorage, web tarayıcımızda “anahtar-değer” (key-value) çiftleri şeklinde veri kaydetmemize ve bu verileri yeni bir oturumda (tarayıcı daha sonra tekrar açıldığında) yeniden kullanmamıza olanak tanıyan bir özelliktir. Kaydedilen bu bilgiler, genellikle kullanıcının bilgisayarındaki özel bir klasörde depolanır.
Geçmişte bu tür işlemler için sadece “Çerezler” (Cookies) kullanılıyordu. Ancak LocalStorage’ın çerezlere göre en büyük avantajı, saklanan verilerin her HTTP ağ isteğiyle (network request) birlikte sunucuya gönderilmek zorunda olmamasıdır. Bu durum, LocalStorage’ı çerezlerden çok daha performanslı ve hafif bir seçenek haline getirir.
LocalStorage’ın en belirgin teknik özelliği, sayfa yenilendikten veya tarayıcı tamamen kapatıldıktan sonra bile bilgileri saklayabilmesi ve daha sonra geri çağırabilmesidir. Kullanıcı tarafından manuel olarak silinmediği sürece LocalStorage içindeki verilerin bir son kullanma tarihi yoktur ve sonsuza dek orada kalabilirler. Bu sayede uygulamanız; kullanıcının bir formda neler girdiğini, web sitesinde hangi ayarları seçtiğini veya daha önce neleri görüntülediğini hatırlayarak oldukça “akıllı” davranışlar sergileyebilir.
2. LocalStorage Nasıl Kullanılır? (Temel Metotlar)
LocalStorage nesnesi, global window nesnesinin bir özelliğidir ve bu verileri etkili bir şekilde kullanabilmemiz için bilmemiz gereken birkaç temel metot (fonksiyon) vardır.
Veri Kaydetmek: setItem()
Bir veriyi saklamak istediğimizde setItem() metodunu kullanırız. Bu metot iki parametre alır: Verinin adı (key) ve verinin kendisi (value).
let mesaj = "Merhaba Depolama!";
localStorage.setItem("ornekKey", mesaj);
Yukarıdaki kod çalıştığında, tarayıcınızın hafızasına “ornekKey” adında bir etiketle “Merhaba Depolama!” metni kaydedilir.
Veri Okumak (Geri Çağırmak): getItem()
Daha önce kaydettiğimiz bir veriyi okumak için getItem() metodunu kullanırız ve parantez içine aradığımız verinin anahtar kelimesini (key) yazarız.
let kayitliMesaj = localStorage.getItem("ornekKey");
console.log(kayitliMesaj); // Çıktı: "Merhaba Depolama!"
Bu sayede, tarayıcı kapansa bile siteye tekrar girildiğinde bu mesaj ekrana yazdırılabilir.
Belirli Bir Veriyi Silmek: removeItem()
Eğer sakladığınız bir veriye artık ihtiyacınız yoksa, removeItem() metodu ile onu silebilirsiniz.
window.localStorage.removeItem("ornekKey");
Tüm Verileri Temizlemek: clear()
Kullanıcı siteden çıkış yaptığında veya tüm ayarları sıfırlamak istediğinde, yerel depolamadaki her şeyi tek bir komutla silebilirsiniz.
window.localStorage.clear();
İndeks Numarasıyla Veri Bulmak: key()
Bazen kayıtlı olan anahtarların (keys) isimlerini tam olarak bilemeyebiliriz ve depodaki tüm veriler üzerinde bir döngü (loop) kurmamız gerekebilir. Bu gibi durumlarda, anahtarları indeks numarasına göre getiren key() metodunu kullanabiliriz.
// Depodaki ilk anahtarın (0. indeks) adını getirir
let ilkAnahtar = window.localStorage.key(0);
let ilkDeger = window.localStorage.getItem(ilkAnahtar);
3. Gelişmiş Kullanım: JSON ile Obje ve Dizileri Saklamak
LocalStorage ile ilgili en önemli kısıtlama, sadece ve sadece metin (string) veri türünü saklayabilmesidir. Peki ya bir alışveriş listesi (dizi/array) veya bir kullanıcı profili (obje/object) saklamak istersek ne olacak?
İşte bu noktada imdadımıza JSON (JavaScript Object Notation) yetişir. JavaScript nesnelerini ve dizilerini LocalStorage’a kaydetmeden önce bir metne (string) dönüştürmemiz, okurken de tekrar JavaScript formatına geri çevirmemiz gerekir.
Diziyi Kaydetmek (JSON.stringify): Veriyi depoya koymadan önce JSON.stringify() kullanarak onu güvenli bir metin formatına çeviririz.
let gorevListesi = [
{ gorev: "JavaScript Öğren", tamamlandi: true },
{ gorev: "Proje Geliştir", tamamlandi: false }
];
// Diziyi string'e çevirip kaydediyoruz
localStorage.setItem("gorevler", JSON.stringify(gorevListesi));
Diziyi Geri Okumak (JSON.parse): Veriyi depodan çektiğimizde o hala bir metindir. Onu tekrar üzerinde döngü kurabileceğimiz, kullanılabilir bir JavaScript dizisine/objesine dönüştürmek için JSON.parse() metodunu kullanırız.
// Metni depodan alıp tekrar JavaScript objesine dönüştürüyoruz
let depodakiGorevler = JSON.parse(localStorage.getItem("gorevler"));
console.log(depodakiGorevler.gorev); // Çıktı: "JavaScript Öğren"
(Önemli Not: SessionStorage kavramı bana sağlanan kaynaklarda yer almamaktadır. Bu içeriği eksiksiz ve faydalı hale getirmek için aşağıdaki “SessionStorage Nedir?” bölümünü tamamen dış kaynaklardan (genel web geliştirme bilgimden) edindiğim bilgilerle oluşturuyorum. Bu bilgileri projenizde kullanmadan önce bağımsız olarak doğrulamak isteyebilirsiniz.)
4. SessionStorage Nedir? (Dış Kaynak Bilgisi)
sessionStorage, tıpkı localStorage gibi çalışan ancak verilerin yaşam süresi (ömrü) bakımından ondan ayrılan bir diğer Web Storage API aracıdır.
- Farkı Nedir? LocalStorage’a kaydedilen veriler tarayıcı kapatılsa bile silinmezken; SessionStorage’a kaydedilen veriler, yalnızca o anki sayfa oturumu (session) boyunca yaşar. Yani kullanıcı web tarayıcısı sekmesini veya penceresini kapattığı anda SessionStorage içindeki tüm veriler otomatik olarak silinir.
- Kullanım Metotları: Birebir aynıdır.
sessionStorage.setItem(),sessionStorage.getItem(),sessionStorage.removeItem()vesessionStorage.clear()şeklinde kullanılır.
Hangi Durumlarda Kullanılır? Örneğin, kullanıcının çok adımlı bir formu doldurduğunu (1. Adım: Kişisel Bilgiler, 2. Adım: Adres) düşünün. Kullanıcı adımları geçerken verilerin geçici olarak aklında tutulmasını istersiniz, ancak sekmeyi kapatıp işlemi iptal ettiğinde bu verilerin bilgisayarında kalmasına gerek yoktur. Bu senaryo için SessionStorage mükemmel bir tercihtir.
5. Güvenlik ve Gizlilik (Önemli Uyarı!)
Verileri kullanıcının kendi tarayıcısında saklamak kulağa çok güvenli ve masum gelse de, LocalStorage kullanımında dikkat etmeniz gereken çok kritik gizlilik kuralları vardır.
LocalStorage’ı, çerezlerle ve gizlilik yasalarıyla (KVKK, GDPR vb.) ilgili problemleri aşabileceğiniz bir “arka kapı” veya alternatif olarak görmemelisiniz. LocalStorage, tıpkı çerezlerde olduğu gibi birebir aynı gizlilik sorunlarını ortaya çıkarır. Web sitenizde kullanıcıları takip ediyorsanız veya onların verilerini kişisel cihazlarında (LocalStorage aracılığıyla) depoluyorsanız, tıpkı çerez politikasında olduğu gibi kullanıcıları bu durumdan haberdar etmek ve aydınlatma metinlerinde bunu açıkça belirtmek zorundasınız.
Ayrıca, XSS (Cross-Site Scripting) adı verilen siber saldırılara karşı savunmasız olabileceğinden, LocalStorage içerisine asla şifre, kredi kartı numarası veya kritik güvenlik token’ları gibi hassas veriler kaydetmemelisiniz.
Sonuç
JavaScript’in Web Storage yetenekleri, modern ve kullanıcı dostu web uygulamaları geliştirmek için elinizdeki en güçlü araçlardan biridir. Kullanıcılarınızın tercihlerini kalıcı olarak hatırlamak için localStorage‘ı, sadece o anki sekme açıkken lazım olan geçici veriler için ise sessionStorage‘ı kullanarak projelerinizin kalitesini bir üst seviyeye taşıyabilirsiniz. Bu konuyu pekiştirmek için tarayıcınızın geliştirici konsolunu açıp (F12) localStorage.setItem("deneme", "Başardım!") yazarak ilk verinizi kaydetmeyi deneyin!
