Retrieve array of objects from local storage

Trying to make to-do list but I have difficulties with local storage. First i don’t understand why does local storage returns [object Object] instead of actual text. Secondly at some point local storage becomes empty and then begins to fill in from the beginning. That’s so confusing for me

function addTask() {
    let addTaskButton = document.getElementById('add-task-button')
    let list = document.getElementById('task-list');
    let li = document.createElement('li');
    let checkbox = document.createElement('input');
    let taskText = document.createElement('span');
    let delButton = document.createElement('button');
    let btnText = document.createTextNode('Delete task');

    checkbox.type = 'checkbox';
    checkbox.className = 'checkbox';
    taskText.innerText =  document.getElementById('input-task').value;
    taskText.className = 'task';
    delButton.className = 'delete-btn';
    delButton.addEventListener('click', deleteTask)
    delButton.addEventListener('click', updateStorage)
    addTaskButton.addEventListener('click', updateStorage);

    delButton.appendChild(btnText);
    li.appendChild(checkbox);
    li.appendChild(taskText);
    li.appendChild(delButton);
    list.appendChild(li);

    document.getElementById('input-task').value = '';


    taskList.push({
        text: taskText.innerText,
        checked: false
    });
}

let taskList = [];

function updateStorage() {
    localStorage.setItem('tasks', JSON.stringify(taskList));
    console.log(taskList)
}

function deleteTask () {
    this.parentNode.remove();
}

document.getElementById('add-task-button').addEventListener('click', addTask);

function loadList() {
    document.querySelector('ul').innerHTML = JSON.parse(localStorage.getItem('tasks')) || [];
}

window.addEventListener('load', loadList);