Доброго времени суток!
Прочитал о LocalStorage и решил поработать с ним. Сделал простые задачки. Там все понятно. И вот решил написать todo list, но похоже что зашел в тупик. Все задачи "туду" не буду описывать, опишу только тот этап на котором застрял:
Есть стартовый объект. Если сторадж пуст - выводим title (одно из значений) этого объекта. Если есть записи, то выводим их, без дэфолтного объекта. Записать получилось, а вот с выводом проблема. Я запутался с этим JSON'ом.
Помогите, пожалуйста!
'use strict';
// todos array
const TODOS = [{
isDone: true,
id: 1,
title: 'Wake Up!'
}];
let todos = TODOS;
let serialTodos = localStorage.getItem('todos') ?
JSON.parse(localStorage.getItem('todos')) : TODOS;
localStorage.setItem('todos', JSON.stringify(serialTodos));
let addTodo = document.getElementById('addTodo'), // btn
newTodo = document.getElementById('newTodo'), // input
todosList = document.getElementById('todosList'); // list
// get todos ID
function getMaxId() {
let maxId = 0;
for (let todo of todos) {
if (todo.id >= maxId) {
maxId = todo.id + 1;
}
}
return maxId;
}
// make div for new todos
let makeNewTodo = text => {
let todo = document.createElement('div');
todo.textContent = text;
todosList.appendChild(todo);
let clearBtn = document.createElement('button');
todosList.appendChild(clearBtn);
clearBtn.addEventListener('click', function() {
localStorage.removeItem('todos');
while (todosList.firstChild) {
todosList.removeChild(todosList.firstChild);
}
})
};
// add new todos
addTodo.addEventListener('click', function() {
let newTodoName = newTodo.value;
let maxId = getMaxId(todos);
todos.push({
isDone: false,
id: maxId,
title: newTodoName
});
localStorage.setItem('todos', JSON.stringify(serialTodos));
makeNewTodo(newTodoName);
newTodo.value = '';
});
serialTodos.forEach(item => {
makeNewTodo(item);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LearnJS</title>
</head>
<body>
<div>
<input id="newTodo" type="text">
<button id="addTodo">add</button>
</div>
<div id="todosList">
</div>
<script src="learn.js"></script>
</body>
</html>