[Dúvida] Não atualiza as quantidades no meu localStorage

Olá, Igor!

Seu código está ficando bem legal!

No seu código, você tentou atualizar o item existente com a seguinte linha:

listaDeCoisas.existe.id = itemAtual

No entanto, uma forma de atualizar um item em um array em JavaScript é acessar o item pelo seu índice e atribuir o novo valor a ele. Nesse caso, você pode usar o índice do item 'existe' no array 'listaDeCoisas'.

Então, a linha de código acima deve ser substituída por:

listaDeCoisas[existe.id] = itemAtual

Aqui está o trecho de código corrigido:

if (existe){
    itemAtual.id = existe.id
    atualisaElemento(itemAtual)

    listaDeCoisas[existe.id] = itemAtual
}else {
    itemAtual.id = listaDeCoisas.length

    criaElemento(itemAtual)
        
    listaDeCoisas.push(itemAtual)
}

Veja de funcionou Igor, se não era esse o erro poderia compartilhar mais informações a respeito.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Então... Quando eu postei a dúvida, eu ainda estava no meio do módulo. Agora, eu já terminei esse módulo e esse trecho de código foi alterado durante o progresso. Foi alterado pelo o trecho abaixo, mas ainda não funciona direito. Não consigo salvar no localEstorage quando faço alguma remoção de item, ao recarregar a página, todos os itens somem, e todos os item entram com id=0 no localEstorage.

form.addEventListener ("submit", (evento) =>{
    evento.preventDefault()

    const nome = evento.target.elements['nome']
    const quantidade = evento.target.elements['quantidade']
    
    const itemAtual = {
        "nome": nome.value,
        "quantidade": quantidade.value,
    }

    const existe = listaDeCoisas.find(element => element.nome === nome.value)

    if (existe){
        itemAtual.id = existe.id
        atualisaElemento (itemAtual)

        listaDeCoisas[listaDeCoisas.findIndex(elemento => elemento.id === existe.id)] = itemAtual

    }else {
        itemAtual.id = listaDeCoisas[listaDeCoisas.length] - 1 ? listaDeCoisas[listaDeCoisas.length - 1].id + 1 :0

        criaElemento(itemAtual)
        
        listaDeCoisas.push(itemAtual)
    }

    localStorage.setItem ("listaDeCoisas", JSON.stringify(listaDeCoisas))
    
    nome.value = ""
    quantidade.value = ""
})

Olá Igor!

Alguns erros, não tenho obtido o mesmo resultado que você, por exemplo, "quando faço alguma remoção de item, ao recarregar a página, todos os itens somem", mas nesse momento do curso a remoção através do x ainda não foi habilitada, peço que verifique e compartilhe mais informações a respeito do erro, talvez tenha ficado nebuloso para mim.

Quando ao erro do "todos os item entram com id=0 no localEstorage", este erro de fato acontece, e está na atribuição de IDs aos itens. Quando você adiciona um novo item, está definindo o ID da seguinte maneira:

itemAtual.id = listaDeCoisas[listaDeCoisas.length] - 1 ? listaDeCoisas[listaDeCoisas.length - 1].id + 1 : 0;

Isso não está calculando o próximo ID corretamente. Para resolver isso, você pode simplesmente usar a seguinte linha para atribuir um ID:

itemAtual.id = listaDeCoisas.length > 0 ? listaDeCoisas[listaDeCoisas.length - 1].id + 1 : 0;

Seu LocalStorage deve ficar assim a partir dessa modificação:

Seu projeto está da seguinte forma na minha máquina, caso eu tenha deixado algo passar despercebido, por favor me avisa: Observe que as camisas foram adicionadas normalmente, e dei um refresh na página e tudo funcionou normalmente.

O código utilizado foi o seguinte:

const form = (document.getElementById("novoItem"))
const lista = document.getElementById ('lista')
const listaDeCoisas = JSON.parse(localStorage.getItem ("listaDeCoisas")) ||[]

listaDeCoisas.forEach(element => {
    criaElemento (element)
    
});

form.addEventListener ("submit", (evento) =>{
    evento.preventDefault()

    const nome = evento.target.elements['nome']
    const quantidade = evento.target.elements['quantidade']
    
    const itemAtual = {
        "nome": nome.value,
        "quantidade": quantidade.value,
    }

    const existe = listaDeCoisas.find(element => element.nome === nome.value)

    if (existe){
        itemAtual.id = existe.id
        atualisaElemento (itemAtual)

        listaDeCoisas[listaDeCoisas.findIndex(elemento => elemento.id === existe.id)] = itemAtual

    }else {
        itemAtual.id = listaDeCoisas.length > 0 ? listaDeCoisas[listaDeCoisas.length - 1].id + 1 : 0;


        criaElemento(itemAtual)
        
        listaDeCoisas.push(itemAtual)
    }

    localStorage.setItem ("listaDeCoisas", JSON.stringify(listaDeCoisas))
    
    nome.value = ""
    quantidade.value = ""
})

function criaElemento (item){
    const novoItem = document.createElement ('li')
    novoItem.classList.add("item")

    const numeroItem = document.createElement ('strong')
    numeroItem.innerHTML = item.quantidade
    numeroItem.dataset.id = item.id

    novoItem.appendChild(numeroItem)
    novoItem.innerHTML += item.nome

    lista.appendChild(novoItem)

}

function atualisaElemento (item) {
    document.querySelector ("[data-id='"+ item.id +"']").innerHTML = item.quantidade
}

Caso o erro persista, ou caso eu tenha deixado algo passar, por favor retorne com mais detalhes, agradeço desde já!

Espero ter ajudado!

Sucesso ✨