这些是什么？将Li元素值推入数组时，我会得到的值？

Question

我正在使用香草JS进行待办事项列表，并试图将每个LI元素的输入值推入数组。这是我当前的代码

// variables
const addBtn = document.querySelector('.add-btn');
const list = document.querySelector('ul');
// const marked = document.querySelector('.check');

// load event listeners
loadEventListeners();

function loadEventListeners() {
    addBtn.addEventListener('click', addTasks);

    list.addEventListener('click', removeTask);

    list.addEventListener('click', completeTask);
}

// add task
function addTasks(e) {
    // DOM variables & tasks Array
    const li = document.createElement('li');
    const task = document.querySelector('input');
    const tasks = document.querySelectorAll('input');
    let tasksArr = [];

    // create li element from input
    li.innerHTML = `<input type="checkbox" class="check">
    <input type="text" value="${task.value}" class="task">
    <i class="las la-trash delete-btn"></i>`;
    list.insertBefore(li, list.nextSibling.nextSibling);
    
    // push each task value into array
    tasks.forEach(item => {
        const task = item.value;
        tasksArr.push(task);
    });

    console.log(tasksArr);

    // clear input after entering
    task.value = '';
    e.preventDefault();
}

// remove task
function removeTask(e) {
    if(e.target.classList.contains('delete-btn')) {
        e.target.parentElement.remove();
    };
    e.preventDefault();
}

// complete task
function completeTask(e) {
    if(e.target.classList.contains('check')) {
       e.target.nextSibling.nextSibling.classList.toggle('completed');
    };
    e.preventDefault();
}

:root {
    --main-blue: rgb(0, 183, 255);
    --text-color: rgb(163, 163, 163);
}

body {
    margin: 0;
    box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500&display=swap');

.container {
    display: flex;
    flex-flow: column;
    align-items: center;
    padding-top: .5rem;
    background-color: #c9cacf;
    height: 100vh;
    margin: auto;
    font-family: 'Rajdhani', sans-serif;
}

.app {
    width: 60%;
}

@media (max-width: 768px) {
    .app {
        width: 90%;
    }
}
 
.app h1 {
    color: var(--main-blue);
    font-size: 40px;
    padding: 10px 0px;
    text-align: center;
    border: 1px var(--main-blue) solid;
    border-radius: .5rem;
    background-color: white;
}

.app form {
    display: flex;
    width: 100%;
}

.app form input {
    border: none;
    background-color:white;
    font-size: 16px;
    color: black;
    padding: 10px;
    width: 90%;
    border-radius: .5rem 0 0 .5rem;
}

.app form input:focus {
    outline: none;
}

.app form button {
    border: none;
    color: white;
    background-color: rgb(105, 105, 105);
    font-size: 25px;
    font-weight: 600;
    height: 40px;
    width: 10%;
    border-radius: 0 .5rem .5rem 0;
}

.app form input::placeholder {
    color: var(--text-color);
}
 
.app form button:hover {
    cursor: pointer;
}

.app ul {
    list-style: none;
    color: white;
    padding: 0;
    margin: none;
}
  
.app ul li {
    margin: .3rem auto;
    padding: 10px;
    background-color:  white;
    border: 1px var(--main-blue) solid;
    border-radius: .5rem;
}

.app ul li:hover {
    background-color:  rgb(230, 230, 230);
}
  
.check {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    border-radius: 50%;
    background-color: white;
    border: 1px solid rgb(0, 0, 0);
    -webkit-appearance: none;
}

.check:checked {
    background-color: var(--main-blue);
}

.task {
    font-size: 18px;
    padding: 0 10px;
    border: none;
    color: var(--text-color);
}
  
.task:focus {
    outline: none;
}
  
.app ul li i {
    float: right;
    cursor: pointer;
    font-size: 25px;
    color: var(--main-blue);
}
  
.app ul li i:hover {
    color: rgb(255, 82, 82);
}

.completed {
    text-decoration: line-through;
    color: rgb(255, 82, 82);
}

    <div class="container">
        <div class="app">
            <h1>To Do List</h1>
            <form>
                <input type="text" placeholder="Add new task..." class="input">
                <button type="submit" class="add-btn">&plus;</button>
            </form>
            <ul>
            </ul>
        </div>
    </div>

添加任务效果很好，但是当我安装记录任务时，我会得到这些数组值：

(3) ['task 2', 'on', 'task 1']
(5) ['task 3', 'on', 'task 1', 'on', 'task 2']
(7) ['tasks 4', 'on', 'task 1', 'on', 'task 2', 'on', 'task 3']

有人可以告诉我这些“上”值是什么以及它们为什么会发生？最终，我希望能够将每个新添加的任务添加到本地存储中，但是我不确定如何在不添加“上”值的情况下这样做。