7
respostas

[Bug] APAGUEI OS ARQUIVOS DO LOCALSTORAGE

Oi, pessoal!

estava fazendo a atividade da aula do botão cancelar... e então apaguei os rascunhos "asdasdas" "asdas" "asdsa" da minha localStorage.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Logo após eu ter apagado as tarefas da minha Localstorage apareceu o seguinte erro: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Estive quebrando a cabeça à uns 40minutos, mas decidi pedir socorro antes de terminar a atividade... AHAHAH

meu possível código onde deve estar o erro JSON...

const tarefas = JSON.parse(localStorage.getItem('tarefas')) || []

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

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>
  
`
7 respostas

Fala Hugo, tudo certo? Pelo o que eu vi está faltando fechar a função, está faltando o "}""

const tarefas = JSON.parse(localStorage.getItem('tarefas')) || []

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

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>
  
`
}

Acabei dando uma olhada aqui, e no código não fecha no código que passei... ele fecha no return li (vou enviar o código abaixo novamente)... verifiquei aqui novamente e acabou dando outro erro de Syntax. Insira aqui a descrição dessa imagem para ajudar na acessibilidade código completo.

// encontrar o botão adicionar tarefa

const btnAdicionarTarefa = document.querySelector('.app__button--add-task')
const btnCancelar = document.querySelector('.app__form-footer__button--cancel')
const formAdicionarTarefa = document.querySelector('.app__form-add-task')
const textArea = document.querySelector('.app__form-textarea')
const ulTarefas = document.querySelector('.app__section-task-list')

const tarefas = JSON.parse(localStorage.getItem('tarefas')) || []

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

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>
  
`

const paragrafo = document.createElement('p')
paragrafo.textContent = tarefa.descricao
paragrafo.classList.add('app__section-task-list-item-description')

const botao = document.createElement('button')
botao.classList.add('app_button-edit')


botao.onclick= ()=> {
    debugger
    const novaDescricao = prompt("Qual é o novo nome da tarefa?")
    console.log ('Nova descrição da tarefa:', novaDescricao)
    if(novaDescricao){
          paragrafo.textContent = novaDescricao
        tarefa
        atualizarTarefas()  
    }

}


const imagemBotao = document.createElement('img')
imagemBotao.setAttribute('src', '/imagens/edit.png')

botao.append(imagemBotao)

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

    return li
}

btnAdicionarTarefa.addEventListener('click', () => {
    formAdicionarTarefa.classList.toggle('hidden')
})

btnCancelar.addEventListener('click',() =>{
    textArea.value=''
    formAdicionarTarefa.classList.toggle('hidden')
})

formAdicionarTarefa.addEventListener('submit', (evento) => {
    evento.preventDefault();
    const tarefa = {
        descricao: textArea.value
    }
    tarefas.push(tarefa)
    const elementoTarefa = criarElementoTarefa(tarefa)
    ulTarefas.append(elementoTarefa)
    atualizarTarefas()
    textArea.value = ''
    formAdicionarTarefa.classList.add('hidden')
})

tarefas.forEach(tarefa =>{
    const elementoTarefa = criarElementoTarefa(tarefa)
    ulTarefas.append(elementoTarefa)
})

Pelo erro anterior e esse agora, pode ser que o problema esteja no dado salvo no LocalStorage. O dado pode estar escrito da forma errada, e o JS não está conseguindo realizar o parse dele.

Eu acredito que, como eu apaguei aqui no "value" toda descrição que estava aqui eu devo ter feito algum bug no scrud...

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Você pode passar o link do repositório, por favor

Segue meu repositório:

https://github.com/hugoesq/aulascrud

Passando aqui pra passar o que eu fiz pra resolver...

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

como apaguei da outra vez o "value" com a lista de tarefas, não apaguei a "key" tarefas... e isso causou um certo bug nisso. depois de refazer a const tarefas varias vezes e apagar a key, voltou a funcionar. Abraço!