使用LocalStorage存储TodoList时数据数组出现null值问题求助

问题1：span元素无法用value获取内容 #

span不是输入类表单元素，没有value属性，你用liItem.value获取到的自然是null。要获取span里的文本内容，应该用textContent（推荐）或者innerText，记得加上trim()去掉多余空格。

修改save函数里的这一行：

data.push(liItem.textContent.trim())

问题2：初始化时未处理localStorage为空的情况 #

第一次打开页面时，localStorage中没有"liItem"数据，JSON.parse(localStorage.getItem("liItem"))会返回null，直接调用forEach会抛出错误。需要先判断lsItem是否存在且为数组。

修改自执行函数：

(function(){
    const lsItem = JSON.parse(localStorage.getItem("liItem"));
    // 先判断是否存在有效数据
    if(lsItem && Array.isArray(lsItem)){
        lsItem.forEach((item)=>{
            addToDo(item)
        })
    }
})()

完整修改后的代码 #

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

item.addEventListener(
    "keyup",
    function(event){
        if(event.key == "Enter"){
            // 避免添加空内容
            if(this.value.trim()){
                addToDo(this.value.trim())
                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');
    const data= []; // 用const声明，避免全局污染

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

// 初始化加载数据
(function(){
    const lsItem = JSON.parse(localStorage.getItem("liItem"));
    if(lsItem && Array.isArray(lsItem)){
        lsItem.forEach((item)=>{
            addToDo(item)
        })
    }
})()

额外优化：添加todo时判断输入内容是否为空，避免添加空白项；删除todo后调用save函数，确保localStorage数据同步更新。

内容的提问来源于stack exchange，提问作者Muhammad Umer