1
resposta

[Bug] Erro, meu localStorage não está funcionando mais


const btnAddT = document.querySelector(".app__button--add-task")
const esconderForm = document.querySelector(".app__form-add-task")
const textArea = document.querySelector(".app__form-textarea")
const tarefas = JSON.parse(localStorage.getItem("tarefas")) || []
const ulTarefas = document.querySelector(".app__section-task-list")

function atualizarTarefas(){
    localStorage.setItem("tarefas",JSON.stringify())
}

function criarElementoTarefa(tarefa){
    const li = document.createElement("li")
    li.classList.add("app__section-task-list-item")
    const svg = document.createElement("svg")
    svg.innerHTML = `
        <svg class="app__section-task-icon-status" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="12" fill="#FFF"></circle>
            <path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#01080E"></path>
        </svg>`
    const p = document.createElement("p")
    p.classList.add("app__section-task-list-item-description")
    p.textContent = tarefa.descricao
    const button = document.createElement("button")

    button.onclick = () =>{
        let nomeValor = prompt("Qual o novo nome da tarefa a ser criado?")
        p.textContent = nomeValor
    }
    button.classList.add("app_button-edit")
    const img = document.createElement("img")
    img.setAttribute("src","imagens/edit.png")
    button.append(img)
    li.append(svg)
    li.append(p)
    li.append(button)

    return li
}

btnAddT.addEventListener("click", () =>{
    esconderForm.classList.toggle("hidden")
})
esconderForm.addEventListener("submit", (evento)=>{
    evento.preventDefault()
    const tarefa = {
        descricao: textArea.value
    }
    tarefas.push(tarefa)
    const elementoTarefa = criarElementoTarefa(tarefa)
    ulTarefas.append(elementoTarefa)
    atualizarTarefas() 
    textArea.value = ""
    esconderForm.classList.add("hidden")

})
tarefas.forEach((element) => {
    const elementoTarefa = criarElementoTarefa(element)
    ulTarefas.append(elementoTarefa)
});
1 resposta

Boa tarde, Eduardo! Tudo bem?

Notei que a função atualizarTarefas está definida assim:

function atualizarTarefas(){
    localStorage.setItem("tarefas",JSON.stringify())
}

O problema aqui é que você está chamando JSON.stringify() sem passar nenhum argumento, o que resulta em undefined sendo armazenado no localStorage. O correto é passar a lista de tarefas como argumento:

function atualizarTarefas(){
    localStorage.setItem("tarefas", JSON.stringify(tarefas))
}

Além disso, para garantir que as edições das tarefas também sejam refletidas no localStorage, você precisa atualizar a descrição da tarefa no array tarefas e chamar atualizarTarefas dentro do onclick do botão de edição. Exemplo:

button.onclick = () => {
    let novaDescricao = prompt("Qual o novo nome da tarefa a ser criado?");
    if (novaDescricao) { // Adicionando uma verificação para garantir que a descrição não fique vazia
        p.textContent = novaDescricao;
        tarefa.descricao = novaDescricao; // Atualizando a descrição no array de tarefas
        atualizarTarefas(); // Salvando as mudanças no localStorage
    }
}

Com essas mudanças, seu código deve ser capaz de atualizar corretamente o localStorage sempre que uma tarefa for editada ou adicionada.

Caso o problema persista, basta deixar seu projeto completo no github para que eu realize os testes e te ajude de forma mais assertiva.

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição. Abraços e bons estudos!

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