HTML5 Web Depolama

HTML5 web depolama, çerezlerden (cookies) daha iyi.

HTML5 Web Depolama Nedir?

HTML5 ile, web sayfaları verileri kullanıcının tarayıcısına kaydedebilir.

Bu işlem önceden çerezler ile yapılırdı. Ancak Web Depolama (Web Storage) daha güvenli ve hızlıdır. Veri, her sunucu istemine eklenmez, sadece istendiği zaman kullanılır. Bu özellik ayrıca web sitesinin performansını etkilemeden çok büyük boyutlarda verinin saklanmasını sağlar.

Veri, isim/değer ikilileri şeklinde saklanır ve bir web sayfası sadece kendisi tarafından kaydedilen verilere ulaşabilir.

Çerezlerden farklı olarak, depolama limiti çok fazladır (en az 5 MB) ve bilgiler asla sunucuya gönderilmez.

Tarayıcı Desteği

Web Depolama Internet Explorer 8+, Firefox, Opera, Chrome ve Safari tarafından desteklenir.

HTML5 Web Depolama Nesneleri (Object)

HTML5 Web Depolama verileri istemci bilgisayarda saklamak için iki yeni nesne sağlar:

window.localStorage - Verileri son kullanma tarihi olmadan saklama
code.sessionStorage - Verileri bir oturum için saklama (Pencere kapatıldığında her şey silinir)

Web Depolama kullanmadan önce, tarayıcı tarafından desteklenip desteklenmediğini kontrol edin:

if(typeof(Storage)!=="undefined")
{
// localStorage/sessionStorage için kod kısmı.
}
else
{
// Üzgünüm... Web Depolama desteği yok...
}

LocalStorage Nesnesi

LocalStorage nesnesi, son kullanma tarihi olmadan verileri depolar. Veriler, tarayıcı kapatıldığında silinmez ve sonraki gün, hafta hatta yıl bile kullanılabilir.

Örnek

// Kaydet
localStorage.setItem("lastname", "Smith");
// Geri al
document.getElementById("result").innerHTML=localStorage.getItem("lastname");

Kendin Dene »

Örneğim açıklaması:

Önce name="lastname" ve value="Smith" ile bir localstorage isim/değer ikilisi oluşturun
Sonra "lastname" içindeki değeri geri alın ve id="result" ile elementin içine ekleyin

Yukarıdaki örnek, şu şekilde de yazılabilirdi:

// Kaydet
localStorage.lastname = "Smith";
// Geri al
document.getElementById("result").innerHTML=localStorage.lastname;

"lastname" değerini locastorage'den kaldırmak için gereken sözdizimi (syntax) ise şöyledir:

localStorage.removeItem("lastname");

Not: İsim/değer (Name/value) ikilileri her zaman alfa-numerik (string) olarak kaydedilir. Gerektiğinde, onları istediğiniz formata dönüştürmeyi unutmayın!

Aşağıdaki örnek, kullanıcının bir butona kaç kez tıkladığını sayıyor. Bu kodda, string olarak kaydedilen tıklanma sayısı, sayacın arttırabilmesi için Number() komutu ile numerik değere casting (dönüştürme) yapılıyor:

Örnek

if (localStorage.clickcount)
{
localStorage.clickcount = Number(localStorage.clickcount) + 1;
}
else
{
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML="Siz " +
localStorage.clickcount + " kere butona tıkladınız.";

Kendin Dene »

SessionStorage Nesnesi

SessionStorage nesnesi sadece bir oturum için veri depolar. Bunun dışında tüm özellikleri localStorage ile aynıdır. Tarayıcı kapatıldığında veriler silinir.

Aşağıdaki örnek, mevcut oturum içinde bir butona kaç kez tıklandığını sayar:

Örnek

if (sessionStorage.clickcount)
{
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else
{
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML="Bu oturumda " +
sessionStorage.clickcount + " kere butona tıkladınız.";

Kendin Dene »