HTML5 Web Storage kavramını JavaScript ile yapılacak listesini (To Do List) hazırlayarak anlatacağım.
Web Storage kavramını açıklayarak başlayalım. Bir sayfa üzerinde yaptığımız değişliklikler sıklıkla o sayfada kalmaktadır. Sayfada bir kaydı tutmak istediğimizde eski teknoloji olan Cokie kullanmamız gerekirdi. Cokie kullanımının çeşitli zorlukları var. En önemli olanlarından bir tanesi cokieler sadece 4kb ile sınırlıdır. Web Storage ile çok daha büyük verileri çok kolay şekilde işlemek mümkün. Günümüzde tarayıcılar ( hatta internet explorer da dahil) Web Storage apisini desteklemektedir.
JavaScript Yapılacak Listesi Örnek Uygulama
Düşünün bir web sayfasında kayıt formu dolduruyorsunuz. Formun belirli bir kısmına geldiniz ve yanlışlıkla sayfa kapandı yada başka bir sayfaya geçtiniz. Sayfa geri geldiğinizde kayıtların kaybolduğunu görmek sinir bozucu olsa gerek. İşte localStorage kullanarak kullanıcıların bu gibi durumlarla karşı karşıya gelmelerini önleyebilirsiniz.
Örnekte bir yapılacak listesi görünüyor. Yapılacak listesinde gerekli değişikliği yaptıktan sonra kaydet dediğinizde veriler tarayıcıda localStorage bölümüne kaydedilecektir. Sayfadan ayrılsanız da sayfayı tekrar açtığınızda kaydettiğiniz şekilde karşınıza çıkacaktır.
Web Storage Nasıl Çalışır
HTML5 Apisi ile tarayıcılar iki tane yerel kayıt türünü desteklemektedir:
- window.localStorage – kayıtlar zaman aşımı olmaksınız tutulmaktadır.
- window.sessionStorage – kayıtlar oturum sonlanana kadar yada veri kaybolana kadar tutulmaktadır.
Bu yazıda window.localStorage kullanımı açıklanacaktır.
localStorage ve sessionStorage adında iki tane global nesneyi kullandığımızı öğrendik. Bu nesneler üzerinden bütün ekleme, silme, güncelleme ve okuma işlemlerini gerçekleştiririz. Bu nesneleri ilk kez duyduysanız kullanımı zor düşüncesi oluşabilir, ancak bir çocuğun yapabileceği kadar basit bir kullanıma sahipler.
LocalStorage Yapısı
Resimde localStorage( sessionStorage içinde geçerli bir durum) nesnesinin temsili bir görüntüsü var. Bu nesnenin yapısını biraz incelediğimizde her bir veriyi kaydetmek için anahtar ve değer çiftlerinin kullanıldığını göreceksiniz.
Bir kaç tane veri kaydedilmiş sırasıyla anahtar ve değerlerini yazalım.
- isim anahtarına “Hayri” değeri kaydedilmiş
- soyisim anahtarına “KOÇ” değeri kaydedilmiş
- yas anahtarına 33 değeri kaydedilmiş
Web Storage ile Veriler Alan Adınıza Bağlanır.
localStorage yada sessionStorage ile bir veriyi kaydettiğinizde veri alan adı ile kaydedilmektedir. Örnekte veri tarayıcıya kaydedilirken www.yazilimbilisim.net alan adını kullanmaktadır. Farklı alan adları için farklı localStorage alanları açılıp veriler ayrı ayrı kaydedilir. Günvelik açısında önemli bir durumdur.
Unutmadan uygulamayı eğer kişisel bilgisayarınızda oluşturuyorsanız. localhost gibi bir yerel sunucuya ihtiyacınız var.
localStorage’ı Kod Yazarak Açıklayalım:
Boş bir html sayfası açıp aşağıdaki kodları kopyalayın. Örnek için gerekli olan temel html etiketlerini içermektedir. Kodlarımızı script etiketleri arasına yazacağız.
localStorage yada sessionStorage nesnelerini görmek için tarayıcıların geliştirici ekranını kullanabilirsiniz.
Chrome tarayıcısı için: Ctrl+Shift+I >>> Application sekmesi >>> Storage >>> LocalStorage bölümünü kullanabilirsiniz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Local Storage Örnek</title> </head> <body> <script> </script> </body> </html> |
Veri Ekleme
Daha önce localStorage üzerine kayıt eklemediyseniz. Kayıt ekleyerek başlayalım. setItem metodunu kayıt eklemek için kullanabiliriz. setItem metodu iki parametre almaktadır. 1.parametre anahtar adı, 2.parametre değeri ifade etmektedir.
|
1 2 3 |
window.localStorage.setItem("anahtar","değer"); |
Yukarıdaki tanımdan yola çıkarak örnek kodumuzu oluşturalım.
|
1 2 3 4 5 6 7 |
window.localStorage.setItem("isim","Hayri"); window.localStorage.setItem("soyisim","KOÇ"); window.localStorage.setItem("yas",33); |
Eğer daha önce belirttiğiniz bir anahtarı kullanırsanız kaydetmek için veri eski kaydın üzerine yazılacaktır. Veriniz güncellenmiş olacaktır. Veriyi kontrol edip yoksa kaydetmek isterseniz. verinin oluşturulup oluşturulmadığını kontrol etmeniz yeterli olacaktır.
Verileri kaydederken sadece string biçiminde kayıt yapıldığını bilmeniz gerekmektedir. Karmaşık bir veriyi kaydetmek istediğinizde toString() metodu çalıştırılacak ve üretilen değer kaydedilecektir. Json verisini kaydetmek içinse JSON.stringify() metodu kullanmalısınız.
Veri Okuma
localStore üzerinde kayıtlı olan anahtarları okumak için getItem metodu kullanılır. getItem metodu anahtar adını kendisine parametre olarak alıp geriye veriyi döndürmektedir.
|
1 2 3 |
window.localStorage.getItem("anahtar"); |
Daha önce kaydettiğimiz veriyi okumak için yukarıdaki tanımı kullanarak şu şekilde bir örnek yapabiliriz.
|
1 2 3 4 |
var yasi=localStorage.getItem("yas"); alert(yasi ); |
Eğer veri daha önce kaydedilmeyen bir veriyi okumaya çalıştığımızda undefined değeri geri dönmekterir. Aşağıdaki örnek daha önce kaydedilmediyse bu kayıt yoktur uyarısı verdirecek ve ilgili anahtara kayıt ekleyecektir. Unutmayın örnek ilk çalıştırmada uyarı verecek. sonraki çalıştırmalarda böyle bir kayıt olduğu için uyarı vermeyecektir.
|
1 2 3 4 5 6 7 8 |
var meslek= localStorage.getItem("mdurum"); if(meslek==undefined) { alert("medeni durum girilmemiştir!!!"); localStorage.setItem("mdurum","Bekar"); } |
Veri Silme
Verileri silmek için iki tane metod kullanılmaktadır. Tüm verileri silmek istiyorsak clear() metodunu kullanmamız gerekir. Şayet istediğimiz bir anahtarı silmek istiyorsak removeItem() metodunu kullanmamız gerekmektedir. removeItem metodu kendisine silinecek anahtarı parametre olarak almaktadır.
removeItem metoduna örnek şu şekilde yazabiliriz.
|
1 2 3 4 5 6 7 |
localStorage.setItem("yas",33); localStorage.removeItem("yas"); alert(localStorage.getItem("yas") ); //ÇIKTI : null olacaktır. |
Örnekte yas adında bir anahtara 33 değerini aktardık. Sonraki satırda yas anahtarını sildik. Uyarı ile ekrana yas değerini vermeye çalıştığımızda da null(boş) cevabını verdi.
Son Not
Temel olarak localStorage kullanımını açıkladım. sessionStorage kullanımı da benzer şekilde olmaktadır. localStorage kavramı ile ek olarak tarayıcı desteği, kayıtlı olan veri büyüklüğü kavramlarını da inceleyebilirsiniz.
localStorage kavramında getItem ve setItem için kullanım şekilleri mevcut isterseniz kısa şekilde de kullanabilirsiniz. Aşağıdaki örnekte hem uzun kullanımlarını hem de kısa kullanımlarını yazdım.
Yazma
|
1 2 3 4 |
localStorage.setItem("isim","Hayri"); localStorage["isim"]="Hayri"; //kısa kullanım |
Okuma
|
1 2 3 4 |
alert( localStorage.getItem("isim") ); alert(localStorage["isim"]); //kısa kullanım |
KAYNAK
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
