Cookie'lerden Daha İyi: JavaScript Local Storage ve Session Storage Kullanımı

Adı : Cookie'lerden Daha İyi: JavaScript Local Storage ve Session Storage Kullanımı

Web geliştiricilerinin bir zamanlar tercih ettikleri tek yerel depolama yöntemi olan çerezler, artık günümüzde kullanıcılardan daha fazla kabul edilmeye başlamadı. Bunun sebebi, ziyaret edilen bir web sitesinin tüm kullandıkları çerezlerin tarayıcıya kaydedilmesi ve kullanıcının ayarları artık silinene kadar izlenmesidir. Bu, gizliliği korumak isteyenler için endişe uyandırıcı bir durumdur. Neyse ki, HTML5 ile birlikte JavaScript Local Storage ve Session Storage kullanıcıların verilerini depolamaları için daha iyi bir seçenek sunuyor.
JavaScript Local Storage ve Session Storage nedir?
JS Local Storage, key-value (anahtar-değer) çiftleri adı verilen bir depolama olanakları sunar. Kullanıcı verileri 5-10 MB'a kadar depolanabilir ve bu depolama kullanıcıların tarayıcıları aracılığıyla kullandığı tüm sayfalar arasında kalıcıdır. Bu, kullanıcıların bir web sitesinde kaydettikleri bilgilerin diğer web sitelerine erişim sağlamalarını sağlar.
JS Session Storage ise Local Storage'a benzer, ancak veriler kullanıcının açık olan seansına sınırlıdır. Yani, kullanıcı web sitesini kapatsın ya da seansını sona erdirsin, bu depolama özelliği tüm bilgileri siler.
JS Local Storage ve Session Storage ile Nasıl Kullanılır?
Özellikle web geliştiricileri için, JS Local Storage ve Session Storage kullanmak oldukça kolaydır. Anahtar-değer çiftleri olarak depolama yaparken, her iki veri türü aynı syntax (sözdizimi) kullanır. Örneğin, bir anahtar olarak \"ÜyeAdı\" girerken, değer olarak \"John\" girersiniz. İşte bir örnek:
// LS’de kullanıcı ismi ve şifresini kaydet
localStorage.setItem('userName', 'John');
localStorage.setItem('userPass', '1234');
// SS’de kullanıcının seçtiği ürünleri kaydet
sessionStorage.setItem('productName1', 'Bilgisayar');
sessionStorage.setItem('productName2', 'Telefon');
Verileri öğrenmek için, getItem () kullanarak anahtarları belirleyebiliriz. Veya, removeItem () seçilen bilgiyi kaldırmak için kullanılır. Örnek kod parçası aşağıdaki gibidir:
// LS’de kullanıcı ismini öğrenmek
let userName = localStorage.getItem('userName');
// SS’de kullanıcının seçtiği ikinci ürünü silmek
sessionStorage.removeItem('productName2');
Local Storage ve Session Storage Kullanımına Örnekler
Kurumsal web sayfalarında geçici form bilgileri
Bir kullanıcı bir web sayfasına girip bilgi girmeye çalışıyor. Sayfa ayrılmadan önce, bilgileri kaydetmek istiyor. Bu özellik, kullanıcının işlemi kırdıktan sonra tekrar bilgi girmesi gerektiğinde onun zamanını kaydeder.
İşte bir örneği gösteren bir kod örneği:
let girilen = document.getElementById('form').value;
localStorage.setItem('normalText', girilen);
Ardından, bilgiyi çekmek, önhafızadaki bilgiyi kontrol etmek için bekleriz:
let tutulan = localStorage.getItem('normalText');
document.getElementById('form').value = tutulan;
Göz atma geçmişini kaydetmek
Web sitelerinin göz attığınız sayfaları kaydetmesi, sizi bir çerez ya da tarayıcı geçmişine güvenmeden kaydedilen bilgilerinizi saklarken, tarama geçmişinizi depolayamazsınız.
let gezilenSayfalar = [];
gezilenSayfalar.push('webSayfasi1');
gezilenSayfalar.push('webSayfasi2');
localStorage.setItem('gezilenSayfalar', JSON.stringify(gezilenSayfalar));
let kaydedilmisGecmis = localStorage.getItem('gezilenSayfalar');
let arrayGecmis = JSON.parse(kaydedilmisGecmis);
console.log(arrayGecmis);
Sıkça Sorulan Sorular
1. Local Storage ve Session Storage arasındaki ana fark nedir?
Local Storage, kullanıcı verilerini tarayıcı düzeyinde depolarken bu veriler önbellek belleğinde daima kalıcıdır. Bu, tarayıcı kapandıktan sonra bile, kullanıcı verilerine erişebileceğiniz anlamına gelir. Ayrıca, kullanıcılar, başka bir cihaza geçse bile depolanan verilere erişebilirler.
Session Storage'da kullanıcı verilerinin bir seansı için geçerlidir. Bu, web sayfasını kapattığınızda, veriler de silinir. Yani daha kısası, tarayıcı kapandığında, Session Storage'da depolanan veriler silinir.
2. Local Storage güvenli mi?
Local Storage güvenli değildir ve bu veriler kullanıcılar web tarayıcılarından çıktıktan sonra da görülür. Dolayısıyla, şifreler, kimlik bilgileri ve benzeri hassas bilgileri burada depolamamanız önerilir.
3. Local Storage hangi boyutta veri depolar?
Local Storage, browser'ın önbelleği tarafından belirlenen belirli bir veri sınırına sahiptir. Bu, her tarayıcı tarafından değişebilir, ancak 5MB’dan fazla depolama yapamazsınız.
4. Local Storage taşınabilir mi?
Hayır, Local Storage verileri tarayıcıya bağlıdır ve yalnızca tarayıcı üzerinde depolanır. Tarayıcı değiştirildiğinde, veriler de kaybedilir.
5. Local Storage ve Session Storage benzer mi?
Local Storage ve Session Storage, depolama yöntemleri olarak benzerdir. Ana fark Local Storage önbellekte saklanan ve tarayıcı kapandığında bile kalmaya devam eden verilere sahipken, Session Storage, diğer taraftan tarayıcı kapandığında silinir.