Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

HTML5 Web Storage (Local Storage ve Session Storage) Kullanımı

HTML5 ile gelen Web Storage seçeneklerinden Session Storage ve Local Storage kavramlarının nasıl çalıştığını öğrenelim.

HTML5 ile geliştirilen web sayfalarının verilerini localde (tarayıcıda) kaydedebilirsiniz. HTML5’ten önce tarayıcı üzerinde veriler Cookie ile tutuluyordu. HTML5 ile Cookie’nin yanı sıra web storage’da da verilerinizi saklayabilirsiniz. Web storage’ın avantajı, daha hızlı ve güvenilir olmasıdır. Cookie’lere göre avantajı, daha büyük verilerin barındırılabilmesi ve bu verilerin sadece sayfa tarafından istendiği zaman erişilebilir olmasıdır. Bu yöntemle sayfanın performansında bir düşüş yaşanmayacaktır.

Web storage, HTML5 destekli tarayıcılarda kullanılmaktadır. Bu özelliği kullanacaksanız öncelikle tarayıcının web storage desteğinin olup olmadığını kontrol etmeniz gerekmektedir. Bu işlemi Storage türünün tanımlı olup olmadığı kontrolü ile gerçekleştirebiliriz.

if(typeof(Storage) != "undefined"){
      alert('Local storage desteği var');
}
else{
      alert('Local storage desteği yok');
}

HTML5 destekli tarayıcılarda iki çeşit veri depolama yöntemi vardır.

Local Storage: Tarayıcı üzerinde veriyi sürekli olarak tutar.

Session Storage: Tarayıcı üzerinde veriyi bir oturum boyunca tutar. Oturum sonlandığında veriler de silinir.

HTML5 web storage nesnelerinde key/value eşleşmesi bulunmaktadır. İlk örneğimiz local storage ile ilgili olacaktır. Kişinin ad ve soyad bilgilerini localStorage nesnesinde tutalım.

if(typeof(Storage) !== "undefined"){
     localStorage.Ad = "Veysel Uğur";
     localStorage.Soyad = "Kızmaz";
}
else{
     alert('Local storage desteği yok');
}

Bu örnekte localStorage nesnesinin Ad anahtarına (key) “Veysel Uğur” değeri (value) değeri atanmaktadır. Ardından Soyad anahtarına (key) “Kızmaz” değeri (value) değeri atanmaktadır.

Sakladığımız bu değerlere sayfayı bir kere çalıştırdıktan sonra tarayıcı üzerinde yer alan local storage’da görüntüleyelim.

Chrome & Yandex

 

Local storage’da sakladığımız bu bilgileri ekranda iki adet input (text) içerisinde gösterelim.

<body>
   <script type="text/javascript">
      function kisiTanimla(){
         if(typeof(Storage) !== "undefined"){
            localStorage.Ad = "Veysel Uğur";
            localStorage.Soyad = "Kızmaz";
            document.getElementById("inpAd").value = localStorage.Ad;
            document.getElementById("inpSoyad").value = localStorage.Soyad;
         }
         else{
            alert('Local storage desteği yok');
         }
      }
   </script>
   <div>
      <button onclick="kisiTanimla()">Kişiyi Tanımla</button>
      <div>Ad: <input id="inpAd" type="text"/></div>
      <div>Soyad: <input id="inpSoyad" type="text"/></div>
</body>

Sayfayı çalıştırdığımızda karşımıza “Kişiyi Tanımla” butonu ve iki adet input text (Ad ve Soyad bilgileri için) çıkacaktır. Butona tıkladığımızda local storage’ın Ad ve Soyad keylerine “Veysel Uğur” ve “Kızmaz” değerlerini atıyoruz. Ardından inpAd ve inpSoyad inputlarına bu değerleri atıyoruz.

Atadığınız değerleri tekrar atama yapmak istemiyorsanız localStorage.Ad’ın değerinin olup olmadığını kontrol edebilirsiniz.

 

function kisiTanimla(){
   if(typeof(Storage) !== "undefined"){
      if(localStorage.Ad !== "undefined")
         localStorage.Ad = "Veysel Uğur";
      if(localStorage.Soyad !== "undefined")
         localStorage.Soyad = "Kızmaz";
      document.getElementById("inpAd").value = localStorage.Ad;
      document.getElementById("inpSoyad").value = localStorage.Soyad;
   }
   else{
      alert('Local storage desteği yok');
   }
}

Sayfayı çalıştırıp butona tıkladığınızda local storage’da zaten kayıtlı olan Ad ve Soyad değerleri input’lara aktarılacaktır.

İkinci storage yöntemi session storage’dı. Kullanım şekli local storage ile aynıdır. Tek farklı yukarıda da bahsedildiği gibi, oturum sona erdiğinde buradaki tüm değerler yok olur.

<body>
   <script type="text/javascript">
        function kisiTanimla(){
           if(typeof(Storage) !== "undefined"){
              if(sessionStorage.Ad !== "undefined")
                sessionStorage.Ad = "Veysel Uğur";
              if(sessionStorage.Soyad !== "undefined")
                sessionStorage.Soyad = "Kızmaz";
              document.getElementById("inpAd").value = sessionStorage.Ad;
              document.getElementById("inpSoyad").value = sessionStorage.Soyad;
           }
           else{
              alert('Local storage desteği yok');
           }
        }
   </script>
   <button onclick="kisiTanimla()">Kişiyi Tanımla</button>
   <div>Ad: <input id="inpAd" type="text"/></div>
   <div>Soyad: <input id="inpSoyad" type="text"/></div>
</body>

 

Yepyeni makalelerde görüşmek dileğiyle :)

Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com

 

Yorumlar (0)

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.