localStorage ve sessionStorage

Web Storage API

• Web Storage API, HTML5 sonrasında geleneksel cookielere alternatif olarak oluşturulmuş.
• HTML5 öncesinde uygulama verileri cookie içerisinde saklamak ve bu cookie her server requestinde göndermek zorundaydık.
• Ayrıca cookieler içerisinde saklayabileceğimiz veri boyutu yalnızca 4KB iken yeni Web Storage API sayesinde en az 5MB'a kadar boyutta veri saklayabiliyoruz.
• Üstelik saklanan verinin hiçbir zaman serverimze transfer edilmesi gerekmez.
• Webstorage API ile "key : value" biçiminde verileri saklayabiliriz.

Gerçek hayatta kullanımını görmek için MDN sitesine Chrome ile girdikten sonra Developer Tools > Application > Local Storage bölümüne erişin. Daha sonra dark mode toggleına basarsanız localStorage içerisinde tema tercihinizin saklandığını göreceksiniz.

localStorage ve sessionStorage arasındaki fark

• sessionStorage ile saklanan verilere tek bir session boyunca (yani tarayıcı sekmesi kapatılana dek) saklanır.
• localStorage ile saklanan veriler ise kullanıcı veya siz silmediğiniz sürece sonsuza kadar saklanır. (Sekme veya tarayıcı kapatılsa dahi daha sonra veriye erişebilirsiniz.)

localStorage ve sessionStorage verisine ulaşma

Her ikisi de window objecti içerisinden erişilebildiği için direkt olarak sessionStorage veya localStorage yazarak erişebilirler.

Metodlar

setItem(key, value)

localStorage.setItem('tema', 'koyu');
// => localStorage içerisinde tema tercihini kaydettik.
// ⚠️ Gireceğimiz değerler string olmalı.
// Eğer string dışında bir değer girersek stringe dönüştürülecektir.

getItem(key)

localStorage.getItem('tema');
// => 'koyu'
// localStorage'da sakladığımız string değerini almamızı sağlar.

removeItem(key)

localStorage.removeItem('tema');
// Sakladığımız veriyi siler.

length

localStorage.length;
// Sakladığımız değer sayısını döner.

clear()

localStorage.clear();
// Sakladığımız bütün değerleri siler.