Local storage dizi kaydetmeiçin öncelikle diziyi string ifadeye çevirmemiz gerekir. Aşağıda yazdığım kodda olduğu gibi JSON.stringify() komutunu kullanarak diziyi bir string ifadeye çevirmeniz gerekiyor. Aynı diziyi local storagedan alacaksanız da JSON.parse() ile tekrar diziye çevirmeniz gerekir. Local storage kulanırken tüm verilerinizin formatı string olmak zorundadır.
// HTML *****************************************************
<input type="text" class="inp">
<button class="btn">Kaydet</button>
document.querySelector('.btn').addEventListener('click',()=>{
// JAVASCRİPT ***********************************************
// input value aldık.
var dizi = document.querySelector('.inp').value;
// diziye dönüştürdük
var splits=dizi.split(' ');
// diziyi kaydetmek için öncelikle string bir ifadeye çevirdik.
localStorage.setItem('lsdizi',JSON.stringify(splits))
})
LOCAL STORAGE DİZİ KAYDETME – TÜM ADIMLAR
1. Yukarıdaki kodlarda öncelikle butona tıklandığında inputun içerisine girilen değeri value ile aldık.
2. Daha sonra .split(‘ ’) yardımı ile boşluklarından ayırarak bir dizi şekline getirdik.
3. Elimize geçen diziyi local storage kaydetmek için JSON.stringify(splits)) yardımı ile diziyi yazı halineçevirdik.
4. Artık elimizde bir dizi yerine normal bir yazı olduğundan kolay bir şekilde yazıyı kaydettik.
5. Yazıya çevirdiğimiz diziyi dizi şeklinde geri alabilmek için JSON.parse(localStorage.getItem('lsdizi'))kalın punto ile yazılmış bölümde yazı şeklindeki dizimizi çağırdık. Dışarısında bulunan JSON.parse() ifadesi ile de yazıya çevirdiğimiz diziyi çevirmeden önceki haline getirerek tekrar dizi formatına çevirdik.
6. Artık local storagedan aldığımız diziyi normal bir dizi şeklinde kullanabiliriz.
LOCAL STORAGE DİZİ KAYDETME – STRİNGİFY VE PARSE MANTIĞI
Elimizde bulunan diziyi konsola yazdırdığımızda aşağıdaki gibi bir sonuç alırız. Bu sonuçtan da anlaşılacağı üzere elimizde incelenebilir bir dizi var.
Konsolda bulunan ilk ifade local storage kullanılarak kaydedilmiş dizinin hiçbir işlem uygulanmadan çekilmiş halidir. Konsolda bulunan ikinci ifade ise ilk ifadenin JSON.parse() yardımı ile diziye çevrilmiş halidir.
Yani local storage hiçbir şekilde diziyi direk olarak kaydedemezsiniz. Bu işlemi uygulayabilmeniz için ifadeyi yazı biçimine çevirmeniz gerekiyor. Sunucu taraflı işlemlerde olduğu gibi sadece string ifadeler kullanılıyor.
Elimizde bulunan diziyi ilk olarak JSON.stringify(dizi) şeklinde yazıya çevirmemiz gerekiyor. Bu işlemi yaptıktan sonra ister sunucuya gönderin ister local storage kaydedin hiçbir sorun olmayacaktır. Herhangi bir ifadeyi bu yöntem ile yazıya çevirdikten sonra istediğiniz gibi kaydedebilirsiniz.
İkinci aşamada ise artık elimizde bir yazı var. İstediğimiz yere kaydettikten sonra geri aldığımızda elimize sadece bir yazı geçecektir. Bu durumda ise yaptığımız işlem yazıyı diziye çevirmektir. JSON.parse(dizi) ile dizi formatında olan string ifadeleri tekrar diziye çevirebiliriz.
Kısacası diziyi local storage’a direk kaydetmeye çalışırsanız hata alırsınız. Bu işlem için öncelikle dizinin yazıya çevrilmesi gerekiyor. Bu aşamadan sonra kaydedebilirsiniz. Geri çağırırken ise yazının diziye çevrilmesi gerekiyor. Bu aşamadan sonra da istediğiniz gibi kullanabilirsiniz. Herhangi bir sorunuz için yorum bölümünden iletişime geçebilirsiniz. Daha fazla içerik için ana sayfayagidebilir veya benimle iletişime geçmek için iletişim bölümüne gidebilirsiniz.