Yerel Depolama (Local Storage) ve Web'de kullanımı

Web uygulamaları geliştirirken kullanıcı tarafından girilen veya uygulama tarafından oluşturulan birtakım verilerin depolanması ve sonrasında bu verilere tekrar erişmek gerekmektedir. Geleneksel yöntemde bu türden veriler iki farklı yöntemle depolanıyor; tarayıcı tarafında cookie ve sunucu tarafında session. HTML5 ile birlikte veri depolama yönteminde birtakım yenilikler geliyor. Artık veriler sunucu tarafından değil, kullanıcının bilgisayarında (local) saklanabiliyor. Local'de depolama ile cookie'de depolama arasındaki en temel fark: boyut. HTML5, web uygulamalarındaki verilerin tarayıcı tarafından saklaması için birtakım JavaScript kütüphaneleri içeriyor, JavaScript ile tarayıcı taraflı veri saklama işlemleri aşağıda göstereceğimiz örneklerdeki gibi yapılabilmektedir.

Web Storage (Local Storage, yerel depolama) aslında HTTP cookie'leri gibi çalışır, kullanıcı tarayıcısını kapatsa bile bu veriler silinmez, kaybolmazlar. Local Storage'ın en önemli farkı, sunucu tarafına bir istek yapılmadan, tüm işlemlerin tarayıcı tarafında yapılmasıdır, bu da performans artışı sağlamaktadır. Session (oturum) değerleri tarayıcı veya sekme kapandığında kaybolurlar. Düşünün, bir kullanıcı alışveriş yaptığı sırada yanlışlıkla tarayıcısını veya sekmesini kapattığında tüm seçimleri kaybolur, aynı işlemleri tekrar yapması gerekir (eğer bu iş için özel bir yapı ve veritabanı kullanılmamışsa). Local Storage dediğimiz yapıda ise herhangi bir veri kaybı olmaz.

Destekleyen Tarayıcılar

• IE8+
• FireFox 3.6+
• Opera 10.5+
• Chrome 5+
• Safari 4+
• iOS 3.2+
• Android 2.1+

Veriler nerede saklanıyor?

Local Storage (yerel depolama) yönteminde her tarayıcının veri saklama yerleri farklıdır. Hatta bu durum işletim sistemine göre de farklılık gösterebilmektedir. 

Firefox: Veriler webappsstore.sqlite file dosyasında saklanmaktadır. Buradaki verileri bilgisayarınıza indirmenize yardımcı olacak bazı Firefox eklentileri de kullanabilirsiniz.

Internet Explorer: %userprofiles%/Local Settings/Application Data/Microsoft/Internet Explorer/DOMStore dizininde bir XML içinde saklanmaktadır.

Chrome: Windows XP – C:\Documents and Settings\%username%\Local Settings\Application Data\Google\Chrome\User Data\Default
Vista/7 – C:\Users\%username%\AppData\Local\Google\Chrome\User Data\Default

Safari:  C:\Users\%username%\AppData\Local\Apple Computer\Safari\LocalStorage adresindeki bir sqllite dosyası içinde saklanmaktadır.

Yerel Depolama (Local Storage) ve JavaScript

Her domain (alana adı) ve subdomain (alt alan adı) farklı bir depolama alanına sahiptir. Bir alan adındaki veriler başka bir alan adı tarafından kullanılmazlar. JavaScript ile farklı bir domain'in depolama alanına erişmek istediğinizde güvenlik uyarısı (SecurityError) ile karşılaşırsınız. Web depolama alanlarına localStorage javascript nesnesi ile erişirsiniz, erişim sonucunda size bir storage nesnesi döndürülür.  Veriler key/value (anahtar/değer) yöntemi ile saklanır, bir string (metin) saklayabileceğiniz gibi JSON nesnesi de  saklamanız mümkündür. 

localStorage ile çalışmaya başlamadan önce tarayıcınızın bunu destekleyip desteklemediğini test etmeniz gerekir, eğer tarayıcınız localStorage nesnesine erişemiyorsa, depolama yöntemini desteklemiyordur, bu gibi durumlarda alternatif bir yöntem kullanmanız gerekebilir. Taraycıcınızın localStorage destekleyip desteklemediğini doğrudan kendi yazdığınız javascript kodu ile test edebilirsiniz veya Modernizr gibi javascript kütüphaneleri kullanabilirsiniz. Modernizr'i buradan indirebilirsiniz.

Tarayıcınızın localStorage'i destekleyip desteklemediğini aşağıdaki yöntemle öğrenebilirsiniz.

if (Modernizr.localstorage) {

    $("#result").text('localStorage destekleniyor');
} else {
    $("#result").text('localStorage desteklenmiyor');
}

Saklama (save)

Veri depolama için setItem metodunu kullanabilir veya doğrudan değer ataması yapabilirsiniz.

if (Modernizr.localstorage) {

    var localStore = window.localStorage;

    localStore.setItem["Ulke"] = "TR";

    localStore["Ulke"] = "TR";

    localStore.Ulke = "TR";

    $("#result").text(localStore.Country);

} else {

    $("#result").text('localStorage desteklenmiyor');

}

yukarıdaki örnekte de görebileceğiniz gibi setItem ile, dizi nesnesi olarak veya doğrudan . yazımı ile değer atayabilirsiniz.

Local Storage (Yerel Depolama) cookie'e göre çok daha büyük bir alan sunmaktadır ama tabi bu büyük alan sınırsız değildir, değer ataması yapmadan önce ne kadar yer kaldığını öğrenmek ve ona göre değer ataması yapmak gerekir. Eğer çok büyük bir değer ataması yaparsanız "Out of Memory" hatası alırsınız, bu tür hataları almamak için istisna kontrolü yapmak gerekir.

if (Modernizr.localstorage) {

    var localStore = window.localStorage;

    if (localStore.remainingSpace > 0) {

        // yeterli alan var

    }

} else {

    $("#result").text('localStorage desteklenmemektedir.');

}

Güncelleme (update) ve Silme (update)

Local Storage nesnesi içindeki bir değeri güncelleyebilir veya tamamen silebilirsiniz. Yazının en başında da dediğimiz gibi siz programatik olarak bu değerleri silmediğiniz sürece bu değer saklanmaya devam edecektir. Güncelleme işlemi, değer atama ile aynı şekilde çalışır. Siz aynı key/anahtar alanına başka bir değer atadığınızda oradaki değeri güncellemiş olursunuz. Silme işlemi için ise removeItem metodu kullanılmaktadır.

 if (localStore.Ulke) {  

        localStore.removeItem("Ulke");  

 }  

Sonuç olarak yeni bir teknoloji ve her yeni teknolojinin karanlıkta kalmış noktaları olabilir. Local Storage (Yerel Depolama) ile ilgili en önemli konu güvenlik gibi görünüyor. İnternet Cafe gibi ortak kullanılan bilgisayarlarda bir kullanıcının verileri başka bir kullanıcı tarafından rahatlıkla erişilebileceği için birtakım güvenlik sorunlarına yol açabilir. HTML5 yeni bir teknoloji ve bu yeni teknoloji ile gelen yeni özellikleri kullanmadan önce güvenlik risklerini göz ardı etmemek lazım. 

Bu konuda sizler ne düşünüyorsunuz?