HTML Web Depolama nedir?
Web uygulamalarinda verileri kullanıcının tarayıcısında yerel olarak saklama imkanı sağlar HTML5'ten önce, uygulama verilerinin her sunucu isteğine dahil edilen çerezlerde saklanması gerekiyordu. Web depolama daha güvenlidir ve web sitesi performansını etkilemeden yerel olarak büyük miktarlarda veri depolanabilir.
Çerezlerin aksine, depolama sınırı çok daha büyük (en az 5 MB), Web depolama etki alanı ve protokol başına. Tek bir kaynaktan gelen tüm sayfalar aynı verilere depolanabilir ve erişilebilir.
Nerede kullanılabilir?
Çerezleri kullandığımız gibi amaçlar için kullanılabilir örneğin bir alışveriş sitesi düşünün sepete eklediğiniz ürünlerin kimlik no (idno) adet sayısını burada saklayabilirsiniz özellikle localStorage bunun için çok uygun öyle ki ziyaretçi herhangi bir sebepten sayfayı kapatsa veya tarayıcı çökse tarayıcıda tutulan veriler sayfayı tekrar açtığında orada duruyor olacaktır çünkü Tarayıcı kapalıyken veriler silinmeyecek ve ertesi gün, hafta veya yıl kullanılabilecektir, bu sayede ziyaretçi tekrar tarayıcıdan siteye geldiğinde önceden eklediği ürünleri tekrar ekleme derdine düşmeyecek. Tabiki çerezlerdeki gibi tarayıcı temizliği veriyi silecek olduğunu da unutmayalım.
Tarayıcı Desteği
- Chrome 4.0
- Internet Explorer / Edge 8.0
- Firefox 3.5
- Safari 4.0
- Opera 11.5
HTML Web Depolama Nesneleri
HTML web depolama, istemcide veri depolamak için iki nesne sağlar
- window.localStorage : son kullanma tarihi olmayan verileri depolar
- window.sessionStorage : bir oturum için veri depolar (tarayıcı sekmesi kapatıldığında veriler kaybolur)
if (typeof(Storage) !== "undefined") {
// localStorage veya sessionStorage kodları
} else {
// Web Depolama desteği yok..
}KopyalaLocalStorage Nesnesi
LocalStorage nesnesi son kullanma tarihi olmayan verileri depolar. Tarayıcı kapalıyken veriler silinmeyecek ve ertesi gün, hafta veya yıl kullanılabilecektir.
Örnek kod
<html>
<body>
<div id="sonuc"></div>
<script>
if (typeof(Storage) !== "undefined") {
//Veri Kayıt etme
localStorage.setItem("soyad", "İbrahim");
// Kyıtlı veriyi okuma
document.getElementById("sonuc").innerHTML = localStorage.getItem("soyad");
} else {
document.getElementById("sonuc").innerHTML = "Tarayıcının Web Depolama desteği yok!";
}
</script>
</body>
</html>KopyalaKodu çalıştırınca tarayıcı konsolundan kaydın yapıldığını ve okunduğunu görüyoruz
İki farklı kullanımı vardır üstteki kullanımdan farklı Bir diğer kullanım biçimi de alttaki gibidir.
//Veri Kayıt etme
localStorage.soyad = "İbrahim";
// Kyıtlı veriyi okuma
document.getElementById("sonuc").innerHTML = localStorage.soyad;KopyalaWeb Depolama Silme veya kaldırma
"soyad" localStorage öğesini kaldırma sözdizimi aşağıdaki gibidir.
localStorage.removeItem("soyad");KopyalaNot: İsim / değer çiftleri daima string olarak kaydedilir. Gerektiğinde bunları başka bir formata (sayi) dönüştürmeyi unutmayın!
Aşağıdaki örnek, düğmeye her tıklandığında 5.li sayma yapar. Bu kodda değer dizesi, sayacı artırabilmek için bir (Number) sayıya dönüştürülmüştür.
<html>
<head>
<script>
function Sayac() {
if (typeof(Storage) !== "undefined") {
if (localStorage.sayac) {
localStorage.sayac = Number(localStorage.sayac)+5;
} else {
localStorage.sayac = 5;
}
document.getElementById("sonuc").innerHTML = localStorage.sayac;
} else {
document.getElementById("sonuc").innerHTML = "Tarayıcının Web Depolama desteği yok!";
}
}
</script>
</head>
<body>
<button onclick="Sayac()" type="button">5.li saydır</button>
<div id="sonuc"></div>
</body>
</html>KopyalaSessionStorage Nesnesi
SessionStorage nesnesi, yalnızca bir oturum için verileri depolaması dışında localStorage nesnesine eşittir. Tek farkı Kullanıcı bir tarayıcı sekmesini kapattığında veriler silinir. Ayrıca tarayıcı konsolunda takip etmek için Local Storage değil de Session Storage kısmına bakmanız gerektiğini unutmayın.
Aşağıdaki örnek Üstteki örneğin aynısı olan fakat SessionStorage kullanarak, düğmeye her tıklandığında 5.li sayma yapar. Bu kodda değer dizesi, sayacı artırabilmek için bir (Number) sayıya dönüştürülmüştür.
<html>
<head>
<script>
function Sayac() {
if (typeof(Storage) !== "undefined") {
if (sessionStorage.sayac) {
sessionStorage.sayac = Number(sessionStorage.sayac)+5;
} else {
sessionStorage.sayac = 5;
}
document.getElementById("sonuc").innerHTML = sessionStorage.sayac;
} else {
document.getElementById("sonuc").innerHTML = "Tarayıcının Web Depolama desteği yok!";
}
}
</script>
</head>
<body>
<button onclick="Sayac()" type="button">5.li saydır</button>
<div id="sonuc"></div>
</body>
</html>Kopyala"sayac" sessionStorage öğesini kaldırma sözdizimi localStorage'dekine benzer ve aşağıdaki gibidir.
sessionStorage.removeItem("lastname");KopyalaHTML5 özelliği olan onunla gelen ve javascript kodları ile kullanılan üstüne birde beni hangi kategoride yazmam konusunda çok düşündüren bu yazıya müsadenizle burada noktayı koymak istiyorum.
Her şey gönlünüze göre olsun.
