ローカルストレージ内のjsonリストを反復する

Question

リストを繰り返し処理する方法を探していますので、リスト内のすべての項目を表示できます。現在は、保存された1つの組み合わせのみが表示されます。 ('.se-saved').click(function()をクリックすると毎回同じ組み合わせが得られますが、リストの次の項目には移動しません。私はJavaScriptが初めてです。これは私がこれまでに得たものです。

$(document).on('click', '.save-btn', function(){   
    var saveDrink = data[num].name; 
    var saveFood = input; 

    var SaveAll = []; 
    SaveAll.push({saveDrink,saveFood}); 
    var JSONFavorit = JSON.stringify(SaveAll); 
    localStorage.setItem("Favorit", JSONFavorit); 
    console.log(SaveAll); 
    alert("Your fav drink and food combo is now saved"); 
});   


//runs when btn "Your saved comb" clicks on, the combo.html page 
$('.se-saved').click(function(){ 
    //get from localstorage 
    var favoriter = JSON.parse(localStorage.getItem("Favorit")); 
    console.log(favoriter); 
    $("#fave").append("<p> Drink: " + favoriter[0].saveDrink + ". Food: " + favoriter[0].saveFood + ".</p>"); 
}); 

Answer 1

はい！このコードにはいくつかの欠陥があります。まずオブジェクトはキーと値のペアでなければなりません。ここでは配列として説明しました。したがって、それは救われることはなく、間違いで終わってしまいます。だからあなたはそれが次の形式であるべきであることを確認している。

SaveAll.push({'drink': saveDrink, 'Food': saveFood}); 

注：キー名は一重引用符で囲む必要があります。

第2： 毎回同じ組み合わせがあると言われました。はい！あなたはclick関数内で配列を宣言しているからです。クリックするたびに配列の前の値がクリアされ、毎回新しい配列になります。それで、次のようにそれを外に出してください。

var SaveAll = []; 
$(document).on('click', '.save-btn', function(){ 
// some codes goes here. 
}); 

これらのエラーが解消されたら、反復してローカルストレージに保存するすべての値を簡単に取得できます。 look at this bin.