Segue minha resolução com comentários do projeto proposto.
// Buscando o form e a lista no DOM
const form = document.getElementById("novoItem");
const lista = document.getElementById("lista");
// Buscando a lista de itens do localStorage
// Se não encontrada, assume o valor de Array vazio []
const itens = JSON.parse(localStorage.getItem("itens")) || [];
itens.forEach((elemento) => {
criaElemento(elemento)
})
// Listener do botão Adicionar
form.addEventListener("submit", (evento) => {
// Previnindo o refresh da página
evento.preventDefault();
// Recebendo os valores de nome e quantidade dos elementos de input
const nome = evento.target.elements['nome'];
const quantidade = evento.target.elements['quantidade'];
// Criando um objeto com os dados
const itemAtual = {
"nome": nome.value,
"quantidade": quantidade.value
}
// chamando a função de criar elemento na lista
criaElemento(itemAtual);
// Chamanado a função do LocalStorage
inserirNoLocalStorage(itemAtual);
// Chama a função para limpar formulário
limpaForm(nome, quantidade);
})
function criaElemento(item) {
// Criando elemento "li" e add a classe "item"
const novoItem = document.createElement('li');
novoItem.classList.add("item");
// Criando elemento "strong" e incluíndo a quantidade
const numeroItem = document.createElement('strong');
numeroItem.innerHTML = item.quantidade;
// Inserindo o elemento "strong" no elemento "li" com o nome
novoItem.appendChild(numeroItem);
novoItem.innerHTML += item.nome;
// Inserindo o elemento "li" no elemento "lista"
lista.appendChild(novoItem);
}
function inserirNoLocalStorage(itemAtual){
// Inserindo o objeto no Array itens
itens.push(itemAtual);
//Setando o Array de itens no localStorage
localStorage.setItem("itens", JSON.stringify(itens));
}
function limpaForm(nome, quantidade) {
// Setando o valor dos elementos em ""
nome.value = "";
quantidade.value = "";
}