1
resposta

Duvida sobre localstorage

Olá!

Então, como gostei bastante do curso decidi criar uma nova funcionalidade, quando o usuário clica no botão de check na esquerda da tarefa cadastrada, ele consegue tornar ela concluída, assim como ele também consegue clicar novamente e torná-la ativa.

O problema mora na hora de salvar isso no localstorage, tentei utilizar o tarefa.completa para adicionar ao objeto tarefa o atributo concluida, mas por algum motivo o if antes do onclick não reconhece isso e quando recarrego a página as tarefas concluídas não aparecem concluídas, apenas como UNDEFINED.

Segue meu código:

if (tarefa.completa) {
        li.classList.add('app__section-task-list-item-complete')
        botao.setAttribute('disabled', 'disabled')
    } else {

    li.onclick = () => {
        document.querySelectorAll('.app__section-task-list-item-active')
        .forEach(elemento => {
            elemento.classList.remove('app__section-task-list-item-active')
        })
        if (tarefaSelecionada == tarefa) {
            paragrafoDescricaoTarefa.textContent = ''
            tarefaSelecionada = null
            liTarefaSelecionada = null
            return 
        }
        tarefaSelecionada = tarefa
        liTarefaSelecionada = li
        paragrafoDescricaoTarefa.textContent = tarefa.descricao       

        li.classList.add('app__section-task-list-item-active');
    }

    svg.addEventListener('click', () => {

        if (li.classList.contains('app__section-task-list-item-complete')) {
            li.classList.remove('app__section-task-list-item-complete')
            tarefa.completa = false
        }

        else {
        li.classList.remove('app__section-task-list-item-active')
        li.classList.add('app__section-task-list-item-complete')
        botao.setAttribute('disabled', 'disabled')
        tarefa.completa = true
        atualizarTarefas();
        }
        
        
    })

    li.append(svg)
    li.append(paragrafo)
    li.append(botao)

    return li

}}
1 resposta

Olá, Luiz!

Pelo que entendi, você está enfrentando um problema com a persistência do estado das tarefas como concluídas no localStorage após o recarregamento da página. Isso acontece porque parece que a propriedade completa não está sendo corretamente salva ou recuperada do localStorage.

Voce pode tentar seguir esse passos, Luiz:

  1. Verifique a Função de Atualização: Certifique-se de que a função atualizarTarefas() está corretamente implementada para salvar o estado atual das tarefas no localStorage. Esta função deve ser chamada sempre que uma tarefa for marcada como completa ou revertida para ativa.

  2. Recuperar o Estado ao Carregar a Página: Ao carregar a página, verifique o estado das tarefas armazenadas no localStorage e aplique a classe app__section-task-list-item-complete, além de desabilitar o botão para as tarefas que têm a propriedade completa como true.

  3. Depuração: Utilize console.log() para verificar se os valores estão sendo corretamente definidos e recuperados do localStorage. Isso pode ajudar a identificar onde o problema está ocorrendo.

Certifique-se de que todas as alterações no estado da tarefa sejam acompanhadas por uma atualização correspondente no localStorage.

No mais Luiz, ao testar seu cõdigo me deparei com algumas discrepâncias, compartilhe o seu projeto completo comigo, para podermos avançar em conjunto.

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!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software