Entrar Ainda não tem acesso?
1
resposta

Meus itens não estão sendo armazenados no localStorage e nem estão sendo salvos na pagina..

Referente ao curso JavaScript na Web: armazenando dados no navegador, no capítulo Interagindo com dados da WEB e atividade Consolidando o seu conhecimento

por Fabiana Lino dos Santos
| 52.1k xp | 30 posts

Meus itens não estão sendo armazenados no localStorage e nem estão sendo salvos na pagina, segue abaixo como está a estrutura do código:

Codigo HTML:

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
        rel="stylesheet"
    />
</head>
<body>
    <main class="conteudo">
        <div class="principal">
            <div class="mochila"></div>
            <form action="" class="adicionar" id="novoItem">
                <label for="item">Nome</label>
                <input type="text" name="nome" id="nome" />
                <label for="item">Quantidade</label>
                <input type="number" name="quantidade" id="quantidade" />
                <input type="submit" value="Adicionar" class="cadastrar" />
            </form>
        </div>

        <ul class="lista" id="lista">
            <li class="item"><strong>7</strong>Blusinha</li>
            <li class="item"><strong>1</strong>Calça</li>
            <li class="item"><strong>3</strong>Meia</li>
            <li class="item"><strong>2</strong>Tênis</li>
            <li class="item"><strong>1</strong>Celular</li>
        </ul>
    </main>
    <script src="./JS/main.js"></script>
</body>

Código main.js:

const form = document.getElementById("novoItem");

const lista = document.getElementById("lista");

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


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

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

    const nome = evento.target.elements["nome"];
    const quantidade = evento.target.elements["quantidade"];

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

    criaElemento(itemAtual);

    itens.push(itemAtual);

    localStorage.setItem("itens", JSON.stringify(itens));
    z;
    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
por Victor Costa Santos
| 1922.4k xp | 3690 posts
Alura Scuba Team Monitor de ForumOps

Olá Fabiana! Tudo bem?

Pelo código que você compartilhou, identifiquei um pequeno erro de digitação que pode estar causando o problema. No seu arquivo main.js, você escreveu preventDefalut() em vez de preventDefault() logo em baixo da função form.addEventListener("submit", (evento) => {. Esse erro impede que o evento de submit seja cancelado corretamente, fazendo com que a página seja recarregada e os itens não sejam armazenados no localStorage.

Além disso, você escreveu um caractere z solto que não deveria estar ali. Esse caractere pode estar causando um erro de sintaxe e impedindo que o restante do código seja executado corretamente.

Aqui está o trecho corrigido do seu código main.js:

const form = document.getElementById("novoItem");

const lista = document.getElementById("lista");

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


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

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

    criaElemento(itemAtual);

    itens.push(itemAtual);

    localStorage.setItem("itens", 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);
}

Após fazer essas correções, os itens devem ser armazenados corretamente no localStorage e também serem exibidos na página ao recarregá-la.

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!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!