İçeriğe geç

JavaScript ile Web Storage Kullanımı

HTML5 ile hayatımıza bir çok yenilik girdi. İşte bu yeniliklerden birisi de; Web Storage konusu.

HTML5’ten önce, çeşitli bilgileri (kullanıcı, şifre vs gibi) cookie (çerez)’ler yardımıyla saklama işlemini yerine getiriyorduk. Şimdi düşünüyorum da ne kadar ilkelceymiş!

Cookie kullanmak, kısa çözümler için iyi fakat güvenliği oldukça zayıf bir durum. Bunun nedeni ise; sızma ve kullanıcının verilerinin çalınmasına karşı herhangi bir önlem içermiyor olması.

Ayrıca cookie’nin maksimum tutabileceği datanın büyüklüğü 5Mb ile sınırlı. Fakat Web Storage (Local & Session), Firefox, Chrome ve IE için 10Mb datayı saklayabilecek kapasitede. Safari için durum biraz daha farklı.

Web Storage için, HTML5 ile hayatımıza girdiğini söyledik. Dolayısıyla; Web Storage’yi kullanabilmek için tarayıcımızın desteklemesine ihtiyacımız var.

Kullandığınız tarayıcının, Web Storage desteklemesine sahip olup olmadığını merak ediyorsanız; bunu anlamanın iki yolu var. Bunlardan birincisi, html5test.com adresine gidip tarayıcınızın HTML 5 puanını ölçmeniz. Ayrıca bu siteye gittiğinizde; “Storage” başlığı altında; tarayıcınızın Web Storage’i destekleyip desteklemediğini görebilirsiniz.

Bir diğer yöntem de aşağıdaki kodlarımız.

<script>
    if (typeof Storage != 'undefined') {
	alert('Tarayıcınız, HTML5 desteklemesine sahiptir.');
    } else {
	alert('Tarayıcınız, HTML5 desteklemesine sahip değildir.');
    }
</script>

Yukarıdaki kodlarımız; basit olarak tarayıcınızın, Web Storage’i destekleyip desteklemediğini anlayamaya yöneliktir.

Tarayıcılarımızın, Web Storage’i desteklediğini varsayarak devam edelim.

Web Storage, 2’ye ayrılıyor. Bunlar;

  • window.localStorage
  • window.sessionStorage

Şimdi, localStorage ve sessionStorage konularına değinelim.

localStorage

localStorage, kaydedilen bilgileri belirtilmeyen bir tarihe kadar saklayabilir. Aynı zamanda bu bilgiler istenilen zamanda da silinebilir.

Saklayacağımız bilgiler; key – value şeklinde olacaktır.

Data saklamak için 2 yöntem mevcuttur.

İlk yöntemde; key – value birlikte setItem ile belirtilebilir. Örneğin; ‘username’ : ’emre_4206′ olan eşleşmeyi saklayalım.

localStorage.setItem('username', 'emre_4206');

Yukarıda da gördüğünüz gibi; localStorage nesnesinin setItem metoduna önce key’i ardından value’i gönderdik.

Gelin birlikte bunu test edelim.

Tarayıcımızın, “Geliştirici Araçlar”ını açalım (bir çok tarayıcı için kısayol F12 tuşudur). Açılan pencereden; “Application” sekmesini tıklayalım.

Görüldüğü gibi; “Local Storage” alanında, belirttiğimiz key – value ikilisi yer alıyor.

Örneğin bir de ‘password’ : ‘1234’ ikilisini atayalım.

localStorage.setItem('password', '1234');

Sayfamızı yenileyim, ekranımıza yeniden bakalım.

Görüldüğü gibi; yeni key – value ikilimiz de geldi.

localStorage ‘e değer atamanın bir diğer yolu da;

localStorage.key = value;

şeklindedir. Burada; localStorage’e key’i belirtiyoruz ve değerini de yazıyoruz. Tıpkı aşağıdaki gibi.

localStorage.name = 'Emre Can';
localStorage.surname = 'ÖZTAŞ';

localStorage ‘e key – value şeklinde atama yaptık. Peki bu atadığımız değerleri daha sonra nasıl okuyacağız? Bu işlem için de;

localStorage.key

// veya

localStorage.getItem(key);

şeklinde 2 kullanım da mevcut.

Daha önce atadığımız değerleri geri çağırmak istersek;

localStorage.username

// veya 

localStorage.getItem('username')

şeklinde kullanmamız yeterli olacaktır.

localStorage ‘de array kullanmanız da mümkündür. Örneğin; bir kullanıcının sepete eklediği ürünleri array şeklinde saklayabilirsiniz. Yalnız burada dikkat etmeniz gereken bir kaç kural var.

Öncelikli olarak; elimizde aşağıdaki gibi bir array olduğunu varsayalım.

user = ['emrecan', 1234];

Şimdi de bu array’i ekleyelim.

localStorage.user = user;

Sayfamızı yenileyelim ve yine geliştirici araçlarını açalım.

Görüldüğü gibi üçüncü değerimiz olan array de yerini aldı.

Burada dikkat etmeniz gereken bir nokta var.

array’imiz, string şeklinde konumlandı. Bunu test etmek için kaydettiğimiz array’imizi geri çağıralım ve tipini kontrol edelim.

console.log(typeof localStorage.user);

Ekran çıktımız string şeklinde olacaktır.

Şayet; kullanacağınız array tek boyutlu ise bu kullanım size sıkıntı çıkartmaz. Okunan değeri split() fonksiyonu ile parçalayıp tekrar array haline getirebilirsiniz.

var userArray = localStorage.user.split(',');

Lakin ilişkisel bir array kullanacaksınız; yukarıdaki gibi bir kullanım sizi kurtarmaz. Peki ne yapmamızı gerekiyor?

JavaScript’te ilişkisel bir veri aşağıdaki gibi tanımlanır, bildiğiniz gibi. Aslında array demek doğru olmaz, çünkü bu bir object. Fakat bir yine de array yapısı diyelim.

var user2 = {
    'username': 'emrecan_4206',
    'password': '1234'
}

Bu tanımlamış olduğumuz array’i doğrudan kaydedelim ve sonuçlarını görelim.

localStorage.user2 = user2;

Sayfamızı yenileyelim.

Görüldüğü gibi; object şeklinde atama yaptı. Herhangi bir değer gösterilmiyor. Bu değeri okumaya çalıştığımızda ekranda yazan bu değerler yine karşımıza çıkacaktır.

Peki böyle bir durumda ne yapmamız gerekiyor?

Dikkat ederseniz; array yapımız bir JSON yapısında. Zaten JSON da JavaScript’ten türetilen bir data saklama formatı değil midir? O halde yapmamız gereken şey; bu yapıyı JSON string’e çevirmek. Bu işlemi de aşağıdaki şekildeki gibi yapabiliriz.

JSON.strigify(user2);

Şimdi dizimizi yeniden kaydedelim.

localStorage.user3 = JSON.strigify(user2);

Sayfamızı yenileyelim.

Görüldüğü gibi; user3 alanına, ilişkisel dizimiz yerleştirildi.

Burada dikkat edilmesi gereken bir diğer hususta; bu veriyi alırken, parse etmemiz. Bu işlem de aşağıdaki gibi olacaktır.

JSON.parse(localStorage.user3);

Yukarıdaki satırımızı da kodlarımızın arasına yerleştirelim ve ekran çıktısına bakalım.

Görüldüğü gibi herhangi bir hata almadan ilişkisel dizimizi rahat bir şekilde okuyabildik.

Konumuzu çok uzattığımın farkındayım. O yüzden hemen diğer kavramları basitçe geçelim. Çünkü üzerinde durulacak çok fazla teferruat yok.

localStorage ‘den veri silmek için:

localStorage.removeItem(key)

Tüm verileri silmek için:

localStorage.clear();

Kaydedilmiş kaç tane veri olduğunu öğrenmek için:

localStorage.length;

satırları kullanılır.

sessionStorage

sessionStorage, webStorage’den farklı olarak; bilgileri yalnızca bir oturum için saklar. Kullanıcı tarayıcıyı kapattığı zaman tüm veriler otomatik olarak silinir.

sessionStorage’de veri saklamak için:

sessionStorage.setItem = value;

// veya 

sessionStorage.key = value;

Saklanan herhangi bir veriyi almak için:

sessionStorage.getItem(key);

Saklanan herhangi bir veriyi silmek için:

sessionStorage.removeItem(key);

Saklanan tüm verileri silmek için:

sessionStorage.clear();

Saklanan verilerin sayısı için:

sessionStorage.length;

Satırları kullanılır.

Saygı ve muhabbetle!..

Bu içeriği paylaşmak ister misiniz?

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Buradaki içeriklerin tümü kamu malıdır. Kullanılması ve paylaşılması özgürdür.