Не отображаются элементы после перезагрузки страницы localstorage

Question

После добавления задачи в список добавляется li. Если перезагрузить страницу то все пропадает. А чтобы li появились обратно нужно нажать на "добавить задачу" еще раз

код js:

const addBtn = document.querySelector('#input')
const taskBox = document.querySelector("#task-box")
const delBtn = document.querySelector("#delbtn")

todos = JSON.parse(localStorage.getItem("todo-list"));

input.addEventListener('click', function(){
        let userTask = taskInput.value;
        if(!todos){
            todos = [];
        }
        taskInput.value = '';
        let taskInfo = {name: userTask};
        todos.push(taskInfo);
        localStorage.setItem("todo-list", JSON.stringify(todos));
        showTodo();
        
});

function showTodo(){
    let li = '';
    if(todos){
        todos.forEach((todo, id) => {
            li += `<li class="li-list">
            <p>${todo.name}</p></li>`
    
        });
    }
    taskBox.innerHTML = li;
    localStorage.getItem("todo-list", JSON.stringify(todos));
    
}


delBtn.addEventListener('click', () => {
    todos.splice(0, todos.length);
    localStorage.setItem("todo-list", JSON.stringify(todos));
    showTodo()
});

Answer 1

Судя по тому что вы сказали, у вас проблема инизиализации. Надо вызвать функцию обновления списка в начале разок для инициализации:

const addBtn = document.querySelector('#input')
const taskBox = document.querySelector("#task-box")
const delBtn = document.querySelector("#delbtn")

todos = JSON.parse(localStorage.getItem("todo-list"));

function showTodo() {
    let li = '';
    if (todos) {
        todos.forEach((todo, id) => {
            li += `<li class="li-list"><p>${todo.name}</p></li>`
        });
    }
    taskBox.innerHTML = li;
    localStorage.getItem("todo-list", JSON.stringify(todos));
}

showTodo(); //вот так

input.addEventListener('click', function () {
    let userTask = taskInput.value;
    if (!todos) {
        todos = [];
    }
    taskInput.value = '';
    let taskInfo = { name: userTask };
    todos.push(taskInfo);
    localStorage.setItem("todo-list", JSON.stringify(todos));
    showTodo();
});

delBtn.addEventListener('click', () => {
    todos.splice(0, todos.length);
    localStorage.setItem("todo-list", JSON.stringify(todos));
    showTodo()
});

БЛОГ НА HUSL

Не отображаются элементы после перезагрузки страницы localstorage

Ответы (1 шт):