通过本地存储推送数据时从数据数组中获取 null

Question

我正在制作一个待办事项列表，其中我从本地存储获取数据。 问题是，当我将数据存储在数据数组中时，数据存储的是值=“null”

我希望将跨度值存储在数据数组中，但它没有发生； 并显示在待办事项列表中 请帮助我

代码：

const item = document.querySelector('#item');
const toDoList = document.querySelector('ul');


item.addEventListener(
    "keyup",
    function(event){
        if(event.key == "Enter"){
            addToDo(this.value)
            this.value=""
        }
    })

const addToDo = (item="")=>{
    var liItem = document.createElement('li')
    liItem.innerHTML=`
    <span>${item}</span>
    <i class="fas fa-times"></i>
    `
    toDoList.appendChild(liItem)
    liItem.addEventListener('click',function(){
        liItem.classList.toggle('dark');
    })
    liItem.querySelector('i').addEventListener('click', function(){
        liItem.remove();
    })
save();
    
}
save();
function save(){
    var liItems = document.querySelectorAll('li span');
    
    data= [];

    liItems.forEach((liItem)=>{
        data.push(liItem.value)
    })
    localStorage.setItem("liItem",JSON.stringify(data));
    console.log(data);
}

(
function(){
    const lsItem = JSON.parse(localStorage.getItem("liItem"));

    lsItem.forEach((lsItem)=>{
        addToDo(lsItem)
    })
}
)()

Answer 1

您将使用

li span

 获取所有 

var liItems = document.querySelectorAll('li span');

元素

然后，您循环这些元素并尝试从中获取

.value

(

data.push(liItem.value)

)，但是

<span>

元素没有

value

属性，也没有添加

data-value

Data API 属性。

您需要使用

.innerHTML

来代替：

function save() {
    var liItems = document.querySelectorAll('li span');
    
    data = [];

    liItems.forEach((liItem) => {
        data.push(liItem.innerHTML);
    });

    localStorage.setItem('liItem',JSON.stringify(data));
    console.log(data);
}