I have a recipe app already fetched from an API to my index.html. I added a favourite icon on each of the recipe fetched. When I click on the favourite icon I want a JavaScript function that will store the recipe image, title and URL as an array on my local storage then display it on my favourite.html as an inner html.
Anyone to help me go about this? Its really challenging to me at the moment.
I tried storing on my local storage when favourite icon is clicked and displaying on favourite.html page.
I expected to get the image, title/label and URL saved as an array to my local storage and displayed as an inner html on my favourite.html page.
But my code is only saving the title/label of each recipe when the favourite icon is clicked on local storage. Then for my favourite.html nothing is displaying.
Below is the js code I did:
function addToFavourites(recipeLabel) {
const favourites = getFromLocalStorage(favListKey) || [];
if (!favourites.includes(recipeLabel)) {
favourites.push(recipeLabel);
saveToLocalStorage(favListKey, favourites);
alert(${recipeLabel} added to favourites!);
} else {
alert(${recipeLabel} is already in your favuorites!);
} }
function saveToLocalStorage(key, value) {
localStorage.setItem(key, JSON.stringify(value));
}