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