Выводит [object Object] в списке между перезагрузкой страницы,подскажите,как корректнее можно задействовать localStorage, либо как мне можно подправить мой код для правильной работы моего приложения.
(function(){
// создаём и возвращаем заголовок приложения
function createAppTitle(title){
let appTitle = document.createElement('h2')
appTitle.innerHTML = title
return appTitle
}
// создаём и возвращаем форму для создания дела
function createTodoItemForm(){
let form = document.createElement('form')
let input = document.createElement('input')
let buttonWrapper = document.createElement('div')
let button = document.createElement('button')
form.classList.add('input-group', 'mb-3')
input.classList.add('form-control')
input.placeholder = 'Введите название нового дела'
buttonWrapper.classList.add('input-group-append')
button.classList.add('btn', 'btn-primary')
button.textContent = 'Добавить дело'
button.disabled = true
buttonWrapper.append(button)
form.append(input)
form.append(buttonWrapper)
input.addEventListener('input', function(e) {
e.preventDefault();
if(input.value.length>0){
button.disabled = false
}if(input.value.length==0) button.disabled = true
});
return{
form,
input,
button,
}
}
// создаём и возвращаем список элементов
function createTodoList(){
let list = document.createElement('ul')
list.classList.add('list-group')
return list;
}
function createTodoItem(name){
let item = document.createElement('li');
// кнопки помещаем в элемент, который красиво покажет их в одной группе
let buttonGroup = document.createElement('div')
let doneButton = document.createElement('button')
let deleteButton = document.createElement('button')
//устанавливаем стили, а также для размещения кнопок
// в его правой части с помощью flex
item.classList.add('list-group-item', 'd-flex', 'justify-content-between', 'align-items-center')
item.textContent = name
buttonGroup.classList.add('btn-group', 'btn-group-sm')
doneButton.classList.add('btn', 'btn-success')
doneButton.textContent = 'Готово'
deleteButton.classList.add('btn', 'btn-danger')
deleteButton.textContent = 'Удалить'
// вкладываем кнопки в отдельный элемент, чтобы они объединились в один блок
buttonGroup.append(doneButton)
buttonGroup.append(deleteButton)
item.append(buttonGroup)
//приложению нужен доступ к самому элементу и кнопкам, чтобы они объединились в один блок
return{
item,
doneButton,
deleteButton,
}
}
function createTodoApp(container, title, todoItemsDefault, key){
let todoAppTitle = createAppTitle(title)
let todoItemForm = createTodoItemForm()
let todoList = createTodoList()
if (localStorage.getItem(key) !== null) {
let todoItem = createTodoItem(JSON.parse(localStorage.getItem(key)))
todoList.append(todoItem)
todoItem.doneButton.addEventListener('click', function(){
todoItem.item.classList.toggle('list-group-item-success')
})
todoItem.deleteButton.addEventListener('click', function(){
if(confirm('Вы уверены?')){
todoItem.item.remove()
}
})
}
if(todoItemsDefault){
todoItemsDefault.map(item=>{
let todoItem = createTodoItem(item.name)
todoList.append(todoItem.item)
todoItem.doneButton.addEventListener('click', function(){
todoItem.item.classList.toggle('list-group-item-success')
})
todoItem.deleteButton.addEventListener('click', function(){
if(confirm('Вы уверены?')){
todoItem.item.remove()
}
})
if(item.done){
todoItem.item.classList.add('list-group-item-success')
}
})
}
container.append(todoAppTitle)
container.append(todoItemForm.form)
container.append(todoList)
todoItemForm.form.addEventListener('submit', function(e){
// чтобы страница не перезагружалась
e.preventDefault();
if(!todoItemForm.input.value){
return
}
let todoItem = createTodoItem(todoItemForm.input.value)
localStorage.setItem(key, JSON.stringify(todoItemForm.input.value))
// добавляем обработчики на кнопки
todoItem.doneButton.addEventListener('click', function(){
todoItem.item.classList.toggle('list-group-item-success')
})
todoItem.deleteButton.addEventListener('click', function(){
if(confirm('Вы уверены?')){
todoItem.item.remove()
localStorage.removeItem(key)
}
})
// создаем и добавляем новое дело с названием из поля для ввода
todoList.append(todoItem.item)
// выставляем кнопке disabled
todoItemForm.button.disabled = true
// обнуляем значение в поле, чтобы не пришлось стирать его из поля для ввода
todoItemForm.input.value = ''
})
}
window.createTodoApp = createTodoApp
})();
<!DOCTYPE html>
<html lang="ru">
<head>
<title>TODO</title>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<script defer src="todo-app.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
createTodoApp(document.getElementById('todo-app'), 'Мои дела',[
{name: 'Сходить в магазин', done: true},
{name: 'Купить хлеб', done: true},
],'myKey')
})
</script>
</head>
<body>
<div class="container mb-5">
<nav class="nav">
<a class="nav-link" href="index.html">Мои дела</a>
<a class="nav-link" href="dad.html">Дела для папы</a>
<a class="nav-link" href="mom.html">Дела для мамы</a>
</nav>
</div>
<div id="todo-app" class="container"></div>
</body>
</html>