Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Os itens continuam sumindo

Olá, os itens da minha lista continuam sumindo. Eu comparei meu arquivo main.js com o do professor e aparentemente está tudo igual. Alguém pode me ajudar?

JS:

const form = document.getElementById("novoItem")
var lista = document.getElementById("lista")

var itens = JSON.parse(localStorage.getItem("itens")) || []

itens.forEach( (elemento) => {
    criaElemento(elemento)
})

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

    var nome = evento.target.elements['nome']
    var quantidade = evento.target.elements['quantidade']

    const itemAtual = {
        "nome": nome.value,
        "quantidade": quantidade.value
    } 

    criaElemento(itemAtual)

    itens.push(itemAtual)

    localStorage.setItem("item", JSON.stringify(itens))

    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
    novoItem.appendChild(numeroItem)

    novoItem.innerHTML += item.nome

    lista.appendChild(novoItem)
}
1 resposta
solução!

Oii, Juan! Tudo bem?

Esse problema está ocorrendo porque o código não está lendo corretamente os dados salvos no localStorage. O nome da chave utilizada para salvar os itens é diferente do que está sendo chamado ao recarregar a página:

JSON.parse(localStorage.getItem("itens")) -> atualizando a página, ela tenta buscar o que está salvo na chave "itens". localStorage.setItem("item", JSON.stringify(itens)) -> porém, anteriormente você salvou os itens da mochila na chave "item", diferente da que você chama ao recarregar a página.

Para resolver, basta substituir "item" por "itens":

localStorage.setItem("itens", JSON.stringify(itens))