循环访问本地存储中的 json 列表

Iterate through a json list in local storage

本文关键字：json 列表 存储 访问 循环      更新时间：2023-09-26

我正在寻找一种循环访问列表的方法，以便我可以显示列表中的所有项目。现在它只显示一个保存的组合。当我单击('.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>"); 
});

是的！此代码中存在一些错误。首先，对象应该是键和值对。在这里，您将其称为数组。因此，它不会被保存并最终出错。因此，您必须确保它应采用以下格式。

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

注意：键名应括在单引号中。

第二：你告诉过你每次都有相同的组合。是的！因为您已在 Click 函数中声明了数组。因此，每次单击它都会清除数组中的先前值，并且每次都是新数组。所以把它拿出来，如下所示。

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

一旦消除这些错误。迭代并获取保存在本地存储中的所有值将很容易。看看这个垃圾箱。

相关文章：