Problems with Json and local Storage

Asked

Viewed 40 times

-1

I’m learning to use javascript, I’m following a tutorial,I’ve reviewed the code, it looks identical, but it just doesn’t save. After I update the page which I delete or added does not keep, back to the default.

The code:

//referenciando os elementos
var listElement = document.querySelector('#app ul');
var inputElement = document.querySelector('#app input');
var buttonElement = document.querySelector('#app button');

//armazenamento de ToDo no JS
var todos = JSON.parse(localStorage.getItem('list_todos')) || [] ;

//To do padrão
var todos = [
    'Fazer cafe',
    'Estudar Java',
    'Estudar JavaScript'
];

//função para renderizar toDO
function renderTodos(){
    listElement.innerHTML = ''; //removendo o conteudo do listelement
    //for para arrays
    for (todo of todos){
        //criando os elementos
        var todoElement = document.createElement('li');
        var todoText = document.createTextNode(todo);
        todoElement.appendChild(todoText);
        listElement.appendChild(todoElement);

        //excluindo elementos
        var linkElement = document.createElement('a');
        var linkText = document.createTextNode('Excluir');
        linkElement.appendChild(linkText);
        todoElement.appendChild(linkElement);
        linkElement.setAttribute('href', '#'); //href do 'a'

        //identificar qual remover(pos)
        var pos = todos.indexOf(todo);
        linkElement.setAttribute('onclick', 'deleteTodo(' + pos + ')');

    }
}

renderTodos();

//função adicionar to do
function addTodo(){
    var todoText = inputElement.value; //valor do input

    todos.push(todoText);//adicionar no aray
    inputElement.value = ''; //apaga o atual 
    renderTodos(); //renderizar novamente 
    saveToStorage();

}
//botao para adicionar o todo
buttonElement.onclick = addTodo;

//função para excluir
function deleteTodo(pos){
    todos.splice(pos, 1); //remove uma quantidade de item
    renderTodos();
    saveToStorage();
}
//função de salvamento
function saveToStorage(){
    localStorage.setItem('list_todos', JSON.stringify (todos));
}

THE HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul> </ul>
    <input type="text" placeholder="Digite um todo" />
    <button>Adicionar</button>
    </div>

    <script src="JSAPP.js"></script>
</body>
</html>

The console: inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Photo of the Torage: inserir a descrição da imagem aqui

(it seems to be working, but on the screen it shows the opposite)

javascript html json

1 answer

1


The problem I’m seeing in your script is here:

//armazenamento de ToDo no JS
var todos = JSON.parse(localStorage.getItem('list_todos')) || [] ;

//To do padrão
var todos = [
    'Fazer cafe',
    'Estudar Java',
    'Estudar JavaScript'
];

Note that when opening the page, you check if you have any information in the key list_todos of your localStorage. If so, you parse and store in todos, if not, you initialize the todos with an empty array.

But soon after you overwrite whatever the array is stored in todos with this new array ['Fazer cafe', 'Estudar Java', 'Estudar JavaScript'].

I imagine the idea would be to initialize the todos with that array only if there was nothing in the localStorage, then your code should be something like

//armazenamento de ToDo no JS
var todos = 
    JSON.parse(localStorage.getItem('list_todos')) || 
    ['Fazer cafe', 'Estudar Java', 'Estudar JavaScript'];

  • It worked, thanks a lot. Interesting that I reviewed the tutorial to be sure and yes, it was the same (the rocketseat), I do not know the pq of this, but thank you very much for solving my problem.

Browser other questions tagged javascript html json

You are not signed in. Login or sign up in order to post.