HTML yerel depolama

HTML yerel depolama: cookies'ten daha iyidir.

HTML yerel depolama nedir?

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

HTML5 öncesinde, uygulama verileri sadece cookie'de depolanabilirdi, her sunucu istek de dahil. 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, kaynak (origin) (alan ve protokol) üzerinden geçiş yapar. Tüm sayfalar, kaynakten, aynı veriyi 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 sunucusunda verileri saklamak için iki nesne sağlar:

  • window.localStorage - Son kullanma tarihine sahip olmayan verileri saklar
  • window.sessionStorage - Verileri bir oturum için saklar (tarayıcı etiketi kapatıldığında 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 {
    // Özür dileriz! Web Storage desteklenmiyor ..
}

localStorage nesnesi

localStorage nesnesi, son kullanma tarihine sahip olmayan verileri saklar. Tarayıcı kapatıldığında veriler silinmez ve 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, aksi takdirde: name="lastname", value="Gates"
  • "lastname" değerini al ve id="result" olan elemente ekle

Örnekteki gibi yazılabilir:

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

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

localStorage.removeItem("lastname");

Açıklama: Ad/Değer çiftleri her zaman dizge olarak saklanır. Gerekirse bunları 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 eşittir, ancak sadece bir session'da veri saklar. Kullanıcı belirli bir tarayıcı sekmesine 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