Working with javascript json strings and arrays, and localstorage

I have some JavaScript code that can look like this :

 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"
    }
    ]

And then i have some code which is meant to add another "part" to the array named "card", which means that the array "cards" should become :

 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"
    }
    ]

This is the function i´m currently using to dynamically create the second "claas" of the array.

    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)
    }

I want to use this to make the user able to input values into the inputs, then convert all of that into a json or a array, then save that into localstorage. Amd then add the localstorage key to another localstorage.

Then when the user logs back in i want it so load the json string into a js array so it will become something like this

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"
}
]

When i get the JavaScript array, i need to use it in a loop like this :

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);
}
}

This is used to take the elements from the array, and put them into a ul element