Question

我正在寻找一种迭代列表的方法，这样我就可以显示列表中的所有项目。现在它只显示一个保存的组合。当我点击('.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});

注意：密钥名称应用单引号括起来。

第二名： 你告诉过你每次都有相同的组合。是!因为你已经在click函数中声明了数组。所以每次点击都会清除数组中的前一个值，每次都是新的数组。所以把它带出来如下。

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

一旦消除了这些错误。迭代并获取您在本地存储中保存的所有值将很容易。 look at this bin.

遍历本地存储中的json列表

1 个答案: