Yeni bir sıfırdan ileriye Javascript konusuna hoş geldiniz. Bugünkü konumuz bazı zamanlar projeler yaparken belli bir kayıta ihtiyacımız olur yani mesela basit bir kayıt sayfası yapıyorsunuz ve kullanıcı eğer beni hatırla seçeneği seçerse hesap bilgileri sormadan giriş yapsın istiyoruz. Bu işlem için aslında veritabanı kullanılır ama geçici olarak da Javascript ile bir depolama alanı yapabiliriz. İki türlü depolama türü mevcut bunlar yerel ve oturum olarak geçiyor. Yerel depolamada veriler siz sayfayı incele > application > local storagedeki verileri siz silene kadar bu veriler kayıtlı kalır. Oturum depolamada ise siteyi kapatır kapatmaz veriler otomatik olarak silinir.
Temel olarak bugün ele alacağımız konular bunlar olacaktır. Çok detaya ve tanıma boğmadan pratiğe geçelim böylece çok daha iyi kafanızda oturacaktır.
localStorage Kullanımı
localStorage (yerel depolama) biz verileri kendimiz silene kadar webte tutan depolama türüydü. localStorage bir anahtar ve değer alır. Aynı map fonksiyonu gibi mantığı vardır.
JavaScript:
localStorage.setItem('nick', 'darkS0ldier')
console.log(localStorage)
Veri ekleme için setItem kodunu kullanabiliriz
JavaScript:
localStorage.setItem('Kayıt', 2019)
console.log(localStorage)
const yetenekler= ['HTML', 'CSS', 'JS', 'React']
const jsonYetenek = JSON.stringify(yetenekler)
localStorage.setItem('yetenekler', jsonYetenek)
console.log(localStorage)
İlk olarak bir sayı ekledik ve dizi eklemek için ise önce önce diziyi stringleştirip yerel depolamaya aktarıp bu veri deposunu loga yazdırdık. Aynı şekilde bir objeyi bu yöntemle aktarabilirsiniz.
Peki local için yaptık oturum depolamaları için nasıl bir yol izlemeliyiz sorusuna ise cevap çok basit. localStorage yerine sessionStorage kodunu yazacaksınız onun harici tüm mantık yine aynıdır.
Öğeyi localStorage'dan Alma
Tamam verileri nasıl depoya atacağımızı gördük peki bu verileri nasıl alacağız. Bu kısımda bunu öğreneceğiz
İlk verileri depoya atarken bir adet anahtar ve veri olarak atamıştık key mesela nickti değer ise darks0ldier. Şimdi bu verileri almak için ise sadece key değerini yazarak alacağız.
JavaScript:
let nick = localStorage.getItem('nick')
let kayit = localStorage.getItem('Kayıt')
let yetenek = localStorage.getItem('yetenekler')
console.log(nick, kayit, yetenek)
Güzel verileri konsola yazdırdık ama sanki dizilerden aldığımız veriler pek diziye benzemiyor. Şimdi bu string değeri diziye dönüştürelim
JavaScript:
let yetenek = localStorage.getItem('yetenekler')
let yetenekDizi = JSON.parse(yetenek)
console.log(yetenekDizi)
İlk önce diziyi depolamadan aldık daha sonra bunu stringten kendi haline çevirip konsola yazdırdık gayet de basit bir işlem.
Yukarıda oturum verileri (sessionStorage) için siteyi kapatınca gidiyor demiştik ama şey yerel için geçerli değildi. Eğer localdeki tüm değerleri silmek istiyorsanız clear metodunu kullanabilirsiniz. Böylece tüm değerler silinecektir.
JavaScript:
localStorage.clear()
Tebrikler önemli bir bölümü bitirdin. Veritabanı olmadan da bir nebze olsun projedeki uygulamalarını test edebilirsin artık. Başka bir konuda görüşmek üzere okuduğun için teşekkürler.
