HTML yerel depolama

HTML yerel depolama: cookies'ten daha iyidir.

HTML yerel depolama nedir?

Yerel depolama (Local Storage) ile, web uygulamaları kullanıcı tarayıcısında verileri yerel olarak depolayabilir.

HTML5 öncesinde, uygulama verileri sadece cookie'lerde, her sunucu isteklerinde depolanabilirdi. Yerel depolama daha güvenli ve web sitesi performansını etkilemeden büyük miktarda veriyi yerel olarak depolamak mümkündür.

Cookie ile farklı olarak, depolama sınırları çok daha büyüktür (en az 5MB) ve bilgiler sunucuya iletilmez.

Yerel depolama, köken (origin) (alan ve protokol) üzerinden gerçekleşir. Tüm sayfalar, kökünden, aynı verileri depolayabilir ve erişebilir.

Tarayıcı desteği

Tablo, tamamen yerel depolamayı destekleyen ilk tarayıcı sürümünü gösterir.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML yerel depolama nesnesi

HTML yerel depolama, istemci üzerinde veri saklamak için iki nesne sağlar:

  • window.localStorage - Son kullanma tarihine sahip olmayan verileri saklamak
  • window.sessionStorage - Bir oturum için veri saklamak (tarayıcı etiket sayfasını kapatınca veriler kaybolur)

Yerel depolama kullanırken, localStorage ve sessionStorage'nin tarayıcı desteğini kontrol edin:

if (typeof(Storage) !== "undefined") {
    // localStorage/sessionStorage için kod
} else {
    // Üzgünüm! Web Storage desteklenmiyor ..
}

localStorage nesnesi

localStorage nesnesi, son kullanma tarihine sahip olmayan verileri saklar. Tarayıcı kapatıldığında veriler silinmez, bir sonraki gün, hafta veya yıl boyunca kullanılabilir.

Örnek

// Sakla
localStorage.setItem("lastname", "Gates");
// Al
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Kişisel olarak deneyin

Örnek açıklaması:

  • localStorage ad/Değer çifti oluşturun, name="lastname", value="Gates"
  • "lastname" değerini al ve id="result" olan elemana ekle

Örnek bu şekilde de yazılabilir:

// Sakla
localStorage.lastname = "Gates";
// Al
document.getElementById("result").innerHTML = localStorage.lastname;

"lastname" localStorage projelerinin silme dilimi şu şekildedir:

localStorage.removeItem("lastname");

Açıklama: Ad/Değer çiftleri her zaman dizge olarak saklanır. Gerekirse onları diğer formatlara dönüştürmeyi unutmayın!

Kullanıcıya tıklama sayısını sayan örnek verilmiştir. Kodda, değer dizgesi sayısal olarak dönüştürülür ve sayım artırılır:

Örnek

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Bu düğmeye " +
localStorage.clickcount + " kez.";

Kişisel olarak deneyin

sessionStorage nesnesi

sessionStorage nesnesi, localStorage nesnesine benzer, ancak yalnızca bir session'a veri saklar. Kullanıcı belirli bir tarayıcı etiketini kapatırsa, veriler de silinir.

Aşağıdaki örnek, mevcut session'da kullanıcıya tıklama sayısını sayar:

Örnek

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Bu session'da, bu düğmeye " +
sessionStorage.clickcount + " kez.";

Kişisel olarak deneyin