Html5 İle Verileri Cache’de Saklamak

Html5 ile hayatımıza bir çok yeni teknoloji girdi. Bunlardan birisi de cache sistemidir. Aslında tarayıcıların eskiden beri desteklediği bu teknoloji Html5 ile tamamen desteklenir hale geldi. Html5 desteği olan tüm tarayıcılarda bu özelliği istediğimiz gibi kullanabiliyoruz. İster local düzeyde istersek de session düzeyinde verilerimizi tarayıcılarda saklamamız mümkün. Silverlight gibi alternatif teknolojilerde ise “Isolation Storage” gibi yeniliklerle bu problemlerimizi çözebiliyoruz.

Bazen bazı bilgileri sunucu tarafında saklamak gereksiz olabiliyor. Herkese açık verilerin sunucu tarafında saklanması yerine, kullanıcımızın tarayıcısında saklamamız da mümkün.

Benim yakın zamanda uygulamaya geçireceğim bir proje var. Bu projede illeri, ilçeleri ve semtleri tarayıcıda saklamayı uygun buldum. Bu yazımda da iller adlı veritabanından gelen verileri, tarayıcıda saklayıp, ihtiyaç duyduğumuzda sunucuya gitmek yerine tarayıcıdan çekmeyi anlatacağım.

Yukarıda bahsettiğim problemleri “Storage” nesnesi üzerinden hallediyoruz.

Her tarayıcı Storage teknolojisini desteklemiyor. IE8 depolama alanını desteklerken IE7 bu özelliği desteklemiyor gibi. Bu yüzden kodlarımızı yazarken Storage nesnesi, tarayıcı üzerinde var mı yok mu diye kontrol etmemiz gerekiyor.

if (typeof (Storage) != "undefined") {

}

(typeof (Storage) tarayıcı üzerinde undefined geliyorsa, tarayıcı Storage (depolama) özelliğini desteklemiyor demektir. Eğer “undefined” değilse destekliyordur.

Chrome Storage Destekliyor

Internet Explorer 7 Storage Desteklemiyor

Bu kontrolümüzü yaptıktan sonra, localStoragenesnesi ile; verilerimizi local’de saklayabiliyoruz. Örneğin

localStorage.ad = "Çağdaş";

kodları ile local üzerinde bir veri saklamış oldum.

Görüldüğü üzere veri saklamak çok kolay. Aynı şekilde sunucu üzerinden aldığımız verileri de, bu şekilde saklayabileceğiz.
Fakat bir kaç tane ihtimal düşünerek ilerlememiz lazım. Örneğin Storage desteği olmayan tarayıcılar için ihtimalleri atlamamak lazım.

if (typeof (Storage) != "undefined") {
    if (localStorage.iller) {
        $("body").append("Veriler Cache'den Geldi");
        illeri_doldur(JSON.parse(localStorage.iller));
    } else {
        // Eğer ilk kez sayfa açılıyorsa, verileri bir kez çek
        // localStorage'da sakla.
        verileri_sunucudan_cek();
        $("body").append("Veriler Sunucudan Geldi");
    }
} else {
    // Eğer tarayıcı Storage desteklemiyorsa verilerimiz her seferinde
    // sunucudan çekilmelidir.
    verileri_sunucudan_cek();
}

Yukarıda ki kodu biraz inceleyelim.

(typeof (Storage) ile tarayıcımızda bu teknoloji var mı yok mu diye kontrolü yaptık.

Eğer yoksa verileri_sunucudan_cek() fonksiyonu çağrılıp, verileri getirdik.

Eğer varsa, localStorage nesnesi üzerinde iller (bunu ben tanımladım) diye bir verinin olup olmadığının kontrolünü yaptık.

Çünkü kullanıcı siteye ilk defa girmiş olabilir. Eğer ilk defa girdiyse ve Storage desteği varsa; verileri bir kez çekip, localStorage.iller içine verileri koymamız lazım. verileri_sunucudan_cek() fonksiyonumuzu çağırıyoruz.

Eğer localStorage.iller null değilse, yani verimiz varsa; bu kez de illeri_doldur() fonksiyonumuzu çağırarak ComboBox nesnemizin içeriğini dolduruyoruz. Fakat verileri depolama alanından çekip dolduruyoruz.

Burada JSON.parse() fonksiyonu, string verileri, JSON formatına çevirmemize yarıyor.

function verileri_sunucudan_cek() {
    $.ajax({
        dataType: "json",
        url: "/DbHandler.ashx",
        success: function (data) {
            if ((typeof (Storage) != "undefined")) {
                localStorage.iller = JSON.stringify(data);
            }
            illeri_doldur(data);
        }
    });
}
function illeri_doldur(veri) {
    $.each(veri, function (k, v) {
        $("#ddlIller").append(new Option(v.Value, v.Key));
    });
}

Verileri Depolama Alanından Kaldırmak

Eğer verileri depolama alanından kaldırmak istersek,

localStorage.removeItem("iller");

kodunu yazmamız yeterlidir.

Yazının kaynak kodlarına githup üzerinden ulaşabilirsiniz.

This entry was posted in Asp.Net, Html5 and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *