通过本地存储推送数据时从数据数组获取 NULL-解网

问：

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

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

法典：

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)
    })
}
)()

javascript null 本地存储

此外，它应该代替 .如果与扩展语法一起使用，甚至可以映射要存储的......并将其存储为“项目 s”，例如......toDoList.querySelectorAll('li > span');document.querySelectorAll('li span');dataconst data = [...toDoList.querySelectorAll('li > span')].map(elm => elm.innerHTML)localStorage.setItem('todoItems', JSON.stringify(data));

答：

0赞 Justinas 8/15/2023 #1

您正在获取所有元素li spanvar liItems = document.querySelectorAll('li span');

比你循环这些元素并试图摆脱它（），但元素没有属性，你也没有添加数据API属性。.valuedata.push(liItem.value)<span>valuedata-value

您需要改用：.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);
}

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

getting null from data array when pushing data through local storage

评论

评论