JavaScript ile Web Storage API Kullanımı (localStorage, sessionStorage)

Giriş

Web geliştirme dünyasında, kullanıcı verilerini tarayıcıda depolamak, modern uygulamalar için kritik bir rol oynamaktadır. Web Storage API, verileri tarayıcıda depolamanın kolay ve etkili bir yolunu sunar. Bu API, verileri kullanıcının tarayıcısında saklamanızı sağlar ve sayfa yenilenmeleri veya oturum bitimleri arasında veri kaybını önler.

Web Storage API, iki ana bileşenden oluşur: localStorage ve sessionStorage. Her ikisi de anahtar-değer çiftlerini depolamak için kullanılır, ancak aralarındaki farklar, verilerin ne kadar süreyle saklandığıyla ilgilidir.

Bu yazıda, Web Storage API’yi tanıyacak, nasıl çalıştığını öğrenecek ve localStorage ile sessionStorage arasındaki farkları detaylı bir şekilde inceleyeceğiz. Ayrıca her iki API'yi kullanarak örnekler sunacağız.

Web Storage API Nedir?

Web Storage API, tarayıcıda veri depolamanın bir yoludur. localStorage ve sessionStorage olmak üzere iki ana depolama alanı sunar. Bu API, JavaScript ile kolayca etkileşimde bulunulabilir ve verileri saklamak, almak ve silmek gibi işlemler yapılabilir.

Her iki depolama alanı da anahtar-değer çiftleri şeklinde veri saklar. Bu, verilerin doğrudan JavaScript üzerinden yönetilmesini sağlar.

Web Storage API’nin Avantajları:

• Veri Kalıcılığı: Veriler tarayıcıda saklanır ve sayfa yenilenmeleri arasında kaybolmaz.
• Kolay Kullanım: Veriler anahtar-değer çiftleri şeklinde saklanır, bu da erişimi kolaylaştırır.
• Hızlı Erişim: Verilere hızlı bir şekilde erişebilirsiniz.

localStorage ve sessionStorage Arasındaki Farklar

localStorage

• Veri Süresi: Veriler kalıcıdır, yani tarayıcı kapatılıp açılsa bile veriler kaybolmaz.
• Depolama Alanı: Genellikle 5-10 MB arasında depolama alanı sunar.
• Erişim: Verilere her sayfa yenilendiğinde veya tarayıcıyı kapatıp açtığınızda erişebilirsiniz.

sessionStorage

• Veri Süresi: Veriler sadece bir oturum (sayfa) boyunca saklanır. Tarayıcı veya sekme kapatıldığında veriler kaybolur.
• Depolama Alanı: Genellikle 5-10 MB arasında depolama alanı sunar.
• Erişim: Sadece mevcut oturum (sayfa) boyunca erişilebilir. Farklı sekmeler veya pencerelerde erişilemez.

Web Storage API Kullanımı

Web Storage API ile veri saklamak, almak ve silmek oldukça basittir. İşte temel yöntemler:

1. localStorage Kullanımı

localStorage, verilerin kalıcı olarak saklanmasını sağlar. Kullanıcı sayfayı yenilese ya da tarayıcıyı kapatıp açsa bile veriler silinmez.

Veri Saklama

Veri saklamak için localStorage.setItem() metodunu kullanabilirsiniz:

// Veriyi saklama
localStorage.setItem('username', 'JohnDoe');

Veri Alma

Veriyi almak için localStorage.getItem() metodunu kullanabilirsiniz:

// Veriyi alma
let username = localStorage.getItem('username');
console.log(username); // Çıktı: JohnDoe

Veri Silme

Bir veriyi silmek için localStorage.removeItem() metodunu kullanabilirsiniz:

// Veriyi silme
localStorage.removeItem('username');

Tüm Verileri Temizleme

Tüm verileri silmek için localStorage.clear() metodunu kullanabilirsiniz:

// Tüm verileri silme
localStorage.clear();

Örnek: Kullanıcı Bilgilerini Saklama

// Kullanıcı bilgilerini saklama
localStorage.setItem('user', JSON.stringify({ name: 'John', age: 30 }));

// Veriyi alma
let user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // John
console.log(user.age);  // 30

2. sessionStorage Kullanımı

sessionStorage, verilerin sadece geçerli tarayıcı oturumu süresince saklanmasını sağlar. Sayfa yenilendikçe veriler sıfırlanmaz, ancak oturum (sekme) kapatıldığında kaybolur.

Veri Saklama

Veri saklamak için sessionStorage.setItem() metodunu kullanabilirsiniz:

// Veriyi saklama
sessionStorage.setItem('sessionKey', 'sessionValue');

Veri Alma

Veriyi almak için sessionStorage.getItem() metodunu kullanabilirsiniz:

// Veriyi alma
let sessionValue = sessionStorage.getItem('sessionKey');
console.log(sessionValue); // sessionValue

Veri Silme

Bir veriyi silmek için sessionStorage.removeItem() metodunu kullanabilirsiniz:

// Veriyi silme
sessionStorage.removeItem('sessionKey');

Tüm Verileri Temizleme

Tüm verileri silmek için sessionStorage.clear() metodunu kullanabilirsiniz:

// Tüm verileri silme
sessionStorage.clear();

Örnek: Sayfa Yenileme Durumunda Veri Saklama

// Oturum bilgilerini saklama
sessionStorage.setItem('loginStatus', 'loggedIn');

// Veriyi alma
let status = sessionStorage.getItem('loginStatus');
console.log(status); // loggedIn

localStorage ve sessionStorage Arasındaki Farkları Anlamak

Performans ve Güvenlik

Web Storage API verileri tarayıcıda sakladığı için, bu verilerin güvenliği de önemlidir. Özellikle hassas verileri (parolalar, kimlik bilgileri vb.) localStorage veya sessionStorage gibi yerlerde saklamaktan kaçının. Bu tür veriler için daha güvenli yöntemler (örneğin, sunucu tarafı oturum yönetimi) tercih edilmelidir.

Performans İpuçları:

• Web Storage API ile veri saklarken gereksiz veri miktarından kaçının.
• Büyük verileri (örneğin, büyük resimler veya medya dosyaları) saklamak için Web Storage API yerine IndexedDB kullanabilirsiniz.
• Veriyi sık sık güncellemeniz gerekiyorsa, her güncellemede yeni veri yerine sadece değişen kısmı saklamak daha performanslı olacaktır.

Sonuç

Web Storage API, tarayıcı üzerinde veri saklamak için güçlü ve basit bir yöntemdir. localStorage ve sessionStorage kullanarak verilerinizi etkili bir şekilde saklayabilir ve yönetebilirsiniz. localStorage, verilerin kalıcı olarak saklanmasını sağlarken, sessionStorage sadece geçici oturumlar için uygundur.

Verilerinizi doğru ve güvenli bir şekilde saklamak, modern web uygulamalarının performansını ve kullanıcı deneyimini artıracaktır. Ancak, hassas verileri Web Storage ile saklamaktan kaçınmak önemlidir.