使用javascript json字符串和数组以及本地存储

我有一些JavaScript代码如下所示：

 var cards = [
    {
    "title": "Rugbrød, fuldkorn",
    "titleDetails": "1/2 Skive (fuldkorn)",
    "unitAmount": "25",
    "unit": "g",
    "carbon": "10",
    "energy": "215",
    "fibreDietary": "2",
    "sugar": "0",
    "fat": "0.3",
    "fatSaturated": "0.1",
    "imagePath": "/media/12576637/kulhydratkort_lille_page_001.jpg",
    "category": "Brød",
    "isHealthy": "YES",
    "isTempAddedCarb": "NO",
    "imageId": "98862",
    "imageFileName": "kulhydratkort_lille_page_001.jpg",
    "umbracoId": "98860"
    }
    ]

function renderCards(){
for(var i = 0; i < cards.length; i++){
var ul = document.getElementById("cardslist");
var li = document.createElement('li');
li.id = cards[i].title
li.innerText = cards[i].title
var newa = document.createElement("a")
newa.innerText = cards[i].title;
newa.href = "javascript:clickCard(" + i + ")"
li.appendChild(newa)
ul.appendChild(li);
}
}

然后我有一些代码，这意味着在名为“card”的数组中添加另一个“part”，这意味着数组“cards”应该是：

 var appStatus = [
    {
    "title": "Rugbrød, fuldkorn",
    "titleDetails": "1/2 Skive (fuldkorn)",
    "unitAmount": "25",
    "unit": "g",
    "carbon": "10",
    "energy": "215",
    "fibreDietary": "2",
    "sugar": "0",
    "fat": "0.3",
    "fatSaturated": "0.1",
    "imagePath": "/media/12576637/kulhydratkort_lille_page_001.jpg",
    "category": "Brød",
    "isHealthy": "YES",
    "isTempAddedCarb": "NO",
    "imageId": "98862",
    "imageFileName": "kulhydratkort_lille_page_001.jpg",
    "umbracoId": "98860"
    },
// the thing under this text is what i call the second "class"
    {
    "title": "Rugbrød, fuldkorn",
    "titleDetails": "1/2 Skive (fuldkorn)",
    "unitAmount": "25",
    "unit": "g",
    "carbon": "10",
    "energy": "215",
    "fibreDietary": "2",
    "sugar": "0",
    "fat": "0.3",
    "fatSaturated": "0.1",
    "imagePath": "/media/12576637/kulhydratkort_lille_page_001.jpg",
    "category": "Brød",
    "isHealthy": "YES",
    "isTempAddedCarb": "NO",
    "imageId": "98862",
    "imageFileName": "kulhydratkort_lille_page_001.jpg",
    "umbracoId": "98860"
    }
    ]

这是我目前用来动态创建数组第二个“claas”的函数

    function addcard(){
    const newcard = {
// this gets the information and puts it into a json string
    "title": document.getElementById("card_name").value,
    "unit": document.getElementById("card_unit").value,
    "carbon": document.getElementById("card_kh").value,
    "energy": document.getElementById("card_energi").value,
    "fibreDietary": document.getElementById("card_kostfibre").value,
    "sugar": document.getElementById("card_sukker").value,
    "fat": document.getElementById("card_fedt").value,
    "fatSaturated": document.getElementById("card_mfedt").value
        }
//this creates a localstorage item with the name of the "class", and the contents of the json string
        localStorage.setItem(document.getElementById("card_name").value, JSON.stringify(newcard))
//This adds the localstorage key to a list of "cards", where one "card" is a "class" from the json string
        localStorage.setItem("cards", localStorage.getItem("cards") + "\n" + document.getElementById("card_name").value)
    }

我想使用它让用户能够将值输入到输入中，然后将所有值转换为json或数组，然后将其保存到localstorage中。Amd然后将localstorage密钥添加到另一个localstorage

然后当用户重新登录时，我希望它加载json字符串到js数组中，这样它就会变成这样

var appStatus = [
{
"title": "Rugbrød, fuldkorn",
"titleDetails": "1/2 Skive (fuldkorn)",
"unitAmount": "25",
"unit": "g",
"carbon": "10",
"energy": "215",
"fibreDietary": "2",
"sugar": "0",
"fat": "0.3",
"fatSaturated": "0.1",
"imagePath": "/media/12576637/kulhydratkort_lille_page_001.jpg",
"category": "Brød",
"isHealthy": "YES",
"isTempAddedCarb": "NO",
"imageId": "98862",
"imageFileName": "kulhydratkort_lille_page_001.jpg",
"umbracoId": "98860"
},

 //the thing under this text is what i call the second "class"
{
"title": "Rugbrød, fuldkorn",
"titleDetails": "1/2 Skive (fuldkorn)",
"unitAmount": "25",
"unit": "g",
"carbon": "10",
"energy": "215",
"fibreDietary": "2",
"sugar": "0",
"fat": "0.3",
"fatSaturated": "0.1",
"imagePath": "/media/12576637/kulhydratkort_lille_page_001.jpg",
"category": "Brød",
"isHealthy": "YES",
"isTempAddedCarb": "NO",
"imageId": "98862",
"imageFileName": "kulhydratkort_lille_page_001.jpg",
"umbracoId": "98860"
}
]

当我得到JavaScript数组时，我需要在如下循环中使用它：

 var cards = [
    {
    "title": "Rugbrød, fuldkorn",
    "titleDetails": "1/2 Skive (fuldkorn)",
    "unitAmount": "25",
    "unit": "g",
    "carbon": "10",
    "energy": "215",
    "fibreDietary": "2",
    "sugar": "0",
    "fat": "0.3",
    "fatSaturated": "0.1",
    "imagePath": "/media/12576637/kulhydratkort_lille_page_001.jpg",
    "category": "Brød",
    "isHealthy": "YES",
    "isTempAddedCarb": "NO",
    "imageId": "98862",
    "imageFileName": "kulhydratkort_lille_page_001.jpg",
    "umbracoId": "98860"
    }
    ]

function renderCards(){
for(var i = 0; i < cards.length; i++){
var ul = document.getElementById("cardslist");
var li = document.createElement('li');
li.id = cards[i].title
li.innerText = cards[i].title
var newa = document.createElement("a")
newa.innerText = cards[i].title;
newa.href = "javascript:clickCard(" + i + ")"
li.appendChild(newa)
ul.appendChild(li);
}
}

函数renderCards（）{
对于（变量i=0；i

这用于从数组中获取元素，并将它们放入ul元素中