HTML API Ders_3 Local Storage (Local Depolama)

HTML Local Depolama (Local Storage) Nedir?

  • Html local depolama, cookielerden (çerez/kurabiye) daha etkilidir.
  • Html local depolama, kullanıcının tarayıcısında bilgi depolamaya yarayan bir web uygulamasıdır.
  • HTML5'den önce, uygulama bilgileri (ziyaretçi bilgileri), serverdan talep edildirdi, serverler ise bu bilgileri cookielerde depo etmek zorundaydı. Bu da server taraflı bir işlemdi. Local depolama, daha güvenlidir, daha fazla bilgi depolamaya olanak sağlar ve websitemizin performansını da düşürmez.
  • Cookielerden farklıdır, bilgi depolama limiti çok daha fazladır (en az 5MB) ve bilgiler asla servera gönderilmez.
  • Local depolama, her domain için ayrı bir yerde yapılır. Bir domain adresine ait bütün sayfalar aynı local depolama alanını kullanır ve gerektiğinde aynı alana ulaşır.

Tarayıcı Desteği

Aşağıdaki tabloda, web tarayıcıların hangi sürümlerinden itibaren, local depolama özelliğini desteklediğini görmekteyiz:

API
Web Storage4.08.03.54.011.5

HTML Local Depolama Objeleri

Html local depolama özelliği, istemcide (kullanıcının tarayıcısında) depolanmak üzere iki çeşit obje sunar. Bunlar:

  • window.localStorage : Bilgileri, bir silme tarihi olmadan, sonsuza dek depolar.
  • window.sessionStorage: Bilgileri, tek bir oturum süresince depolar. Tarayıcı sayfası kapatıldığında, bilgiler de silinir.
Local depolamayı kullanmadan önce, localStorage ve sessionStorage için tarayıcı desteği var mı diye kontrol etmekte büyük fayda vardır. Bunun için aşağıdaki javascript kodları işimizi görecektir:

  if(typeof(Storage) !== "undefined") {
    // localStorage/sessionStorage ile ilgili kodlar...
} else {
    // Üzgünüm! Web Storage (Depolama) desteği yok..
}

localStorage Objesi

localStorage objesi, bilgileri bir silme tarihi olmadan depolar. Kullanıcı web tarayıcısını kapattığında, bilgiler silinmeyecektir. Yarın, haftaya, seneye... bilgiler tarayıcıda kayıtlı duracaktır. Örneğe dikkat edelim:

<div id="sonuc"></div>

 <script>
// Tarayıcı desteği kontrolü
if (typeof(Storage) != "undefined") {
    // Bilgi oluşturma
    localStorage.setItem("soyad", "Kaya");
    // Bilgileri geri çağırma
    document.getElementById("sonuc").innerHTML = localStorage.getItem("soyad");
} else {
    document.getElementById("sonuc").innerHTML = "Üzgünüm, tarayıcınız Web Storage özelliğini desteklemior...";
}

</script>

Yukarıdaki kodlara yakından bakalım:

  • Bilgi oluşturma kısmındaki: localStorage.setItem("lastname", "Smith"); kodu veri/değeri bilgi çiftini oluşturur. Bu çiftte; veri="soyad"  ve değeri="Kaya" olarak girilmiştir.
  • Bilgileri geri çağırma kısmında, oluşturduğumuz soyad verisinin değerini aldık ve "sonuc" adlı html elemanının içeriğine gönderdik.
Yukarıdaki örnek şu şekilde de yazılabilirdi:

 // Bilgileri oluşturma
localStorage.lastname = "Kaya";
// Bilgileri geri çağırma
document.getElementById("sonuc").innerHTML = localStorage.lastname;

Eğer, oluşturduğumuz "soyad" bilgisini silmek istersek de şu kod kalıbını kullanacağız:

 localStorage.removeItem("lastname");

 Javascript bilenler anlayacaktır: veri/değeri çifti bir string depolar. İhtiyacımız olduğunda, bu verileri diğer formatlara dönüştürmeyi unutmamalıyız.

Aşağıdaki kod, bir kullanıcın butonlarımızdan birine kaç defa bastığını sayar. Bu kodda, string olan değer bilgisi, number formatına dönüştürülmüştür. Böylece saymak mümkün olmuştur:

<!DOCTYPE html>
<html>
<head>
<script>
function tiklamaSayisi() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("sonuc").innerHTML = "Bu butona " + localStorage.clickcount + " defa tıkladınız.";
    } else {
        document.getElementById("sonuc").innerHTML = "Üzgünüm, tarayıcınız web storage özelliğini desteklemiyor...";
    }
}
</script>
</head>
<body>
<p><button onclick="tiklamaSayisi()" type="button">Buraya tıklayınız!</button></p>
<div id="sonuc"></div>
<p>Butona tıklayın ve sayının arttığını görün!</p>
<p>Tarayıcınızı veya pencerenizi kapatıp tekrar deneyin ve sayının kaldığı yerden devam ettiğini görün.(Sıfırlanmayacaktır.)</p>
</body>
</html>

 Yukarıdaki kodların nasıl çalıştığını görmek için aşağıya bakınız:


Butona tıklayın ve sayının arttığını görün!
Tarayıcınızı veya pencerenizi kapatıp tekrar deneyin ve sayının kaldığı yerden devam ettiğini görün.(Sıfırlanmayacaktır.)


sessionStorage Objesi

sessionStorage objesi, localStorage objesi ile aynı görevi yapar, tek farkı sadece bir oturum için geçerli olmasıdır. Kullanıcının tarayıcısına gönderdiğimiz bilgi, kullanıcı pencereyi kapattığında otomatik olarak silinecektir. 

Aşağıdaki örnek, kullanıcının tek bir oturumda, bir butona kaç defa bastığını sayar:

 <!DOCTYPE html>
<html>
<head>
<script>
function tiklamaSayisi() {
    if(typeof(Storage) !== "undefined") {
        if (sessionStorage.clickcount) {
            sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
        } else {
            sessionStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "Bu butona " + sessionStorage.clickcount + " defa tıkladınız.";
    } else {
        document.getElementById("sonuc").innerHTML = "Üzgünüm, tarayıcınız web storage özelliğini desteklemiyor...";
    }
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Lütfen tıklayınız</button></p>
<div id="result"></div>
<p>Butona tıklayın ve sayının arttığını görün!</p>
<p>Tarayıcınızı veya pencerenizi kapatıp tekrar deneyin ve sayının sıfırlandığını görün.</p>
</body>

</html>

Bu örnek, bir önceki ile çok benzer olduğu için uygulamasını size bırakıyoruz.

Gönderen
Etiketler: , , , , , ,

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)