I created a To-Do List with JS. I'm mostly finished but my last task is to create a local storage. The purpose of that is, that the Tasks should not vanish, when I reload the page. I know that I have to create an array of objects for that, but I don't know how to represent my <'li'> element as an object. So how do I represent my Tasks as an object to create an array

add.addEventListener("click", function (){

    // create task text
    if(task.value != ""){
    let li = document.createElement('li');
    ul.appendChild(li);

        // create checkbox
        let box = document.createElement('input');
        box.setAttribute('type', 'checkbox');
        li.appendChild(box);
        box.classList.add('check');

    //create span
        let span = document.createElement('span');
        li.appendChild(span);
        span.innerHTML= task.value;
        span.classList.add('task');


    // create delete button
    let btn = document.createElement('button');
    li.appendChild(btn);
    btn.classList.add("delete-btn");
    btn.innerHTML = 'x';
    btn.onclick = function () {
        btn.parentElement.remove();
    };
});