Estou tentando armazenar tarefas no localStorage, e depois retornar os valores lá armazenados, porém, mesmo com conversões não consigo obter um retorno correto:
Teste.task {
background-color: orange;
cursor: pointer;
margin: .3em;
display: inline-block;
padding: .5em;
}
</style>
<div class="container">
<div>
<label for="tarefa">Tarefa</label>
<textarea id="tarefa"></textarea>
</div>
<input type="submit" value="adicionar" id="btnSub">
</div>
<div class="tasks">
</div>
<script type="text/javascript" src="todo.js"></script>
JavaScript :
window.onload = () => {
let textarea = document.querySelector('#tarefa');
let btnSub = document.querySelector('#btnSub');
let tasksContainer = document.querySelector('.tasks');
let divs = [];
let tarefas = [];
//parsea as tarefas
var data = JSON.parse(localStorage.getItem('tarefas'));
alert(data.length);
alert(data);
//Verifica se existem tarefas armazaenadas
if(data != null){
//Adiciona as tarefas que estiverem no armazenamento local
for(var k = 0; k < data.length; k++){
let divOld = document.createElement('div');
let divCon = document.createTextNode(data[k].valueOf());
//teste
console.log(data[k]);
//-----------------------------
divOld.appendChild(divCon);
divOld.classList.add('task');
tasksContainer.appendChild(divOld);
}
}
btnSub.addEventListener('click', (e) => {
e.preventDefault();
let div = document.createElement('div');
let divContent = document.createTextNode(textarea.value);
div.appendChild(divContent);
div.classList.add('task');
tasksContainer.appendChild(div);
tarefas.push(divContent);
localStorage.setItem('tarefas', JSON.stringify(tarefas));
textarea.value = "";
})
}