JS任务列表项目Local Storage存储空字符串问题求助

问题根源 #

代码里有两个关键逻辑错误导致空字符串被存入Local Storage：

1. addTask函数中，无论输入是否为空，都会在最后调用storeTaskInLocalStorage(taskInputValue)，空输入时直接把空字符串传入存储函数，导致Local Storage数组中添加空值。
2. else分支里的localStorage.removeItem(taskInputValue)逻辑完全错误——你要操作的Local Storage键是tasks，而不是空字符串，这行代码没有任何作用。

修复方案 #

1. 将storeTaskInLocalStorage(taskInputValue)移动到输入非空的判断分支内部，只有当输入有效时才执行存储操作。
2. 删除else分支里无效的localStorage.removeItem代码。
3. 清理taskFromLocalStorage函数中多余的var taskInputValue = text_input.value;（遍历的参数名和这个变量重名，且无实际用途）。

修复后的完整代码 #

// Storing tags as variables

const text_input = document.getElementById('text');
const submit_input = document.getElementById('submit');
const filter_task = document.getElementById('filter-text');
const clearBtn = document.querySelector('.btn-black');
const addedTasks = document.querySelector('.task-box');
const task_form = document.querySelector('.task-form');
const task_list = document.querySelector('.task-box-list');

// Event Listeners Execution
document.addEventListener('DOMContentLoaded',  taskFromLocalStorage);
task_form.addEventListener('submit', addTask);
addedTasks.addEventListener('click', removeTask);
clearBtn.addEventListener('click', clearTasks);
filter_task.addEventListener('keyup', filterTasks);

// Events Functions

// Retrive tasks from LS
function taskFromLocalStorage() {
    let tasks;
    if (localStorage.getItem('tasks') === null) {
        tasks = [];
    }
    else{
       tasks = JSON.parse(localStorage.getItem('tasks'));
    }
    tasks.forEach(function(task){
     // Create a particular div for every task
     const newDIV = document.createElement('div');
     newDIV.className = "task-box-item flex justify-between px-3 ";

     // Li tag (Task)
     var newTask = document.createElement('li');
     newTask.className = "task-list list-none text-l px-4 py-2";
     newTask.textContent = task;

     // Delete a particular task (link)
     const deleteTask = document.createElement('a');
     deleteTask.className = "delete_task translate-y-[10px]";
     deleteTask.href = '#';
     
     // Delete a particular task (icon)
     const deleteIcon = document.createElement('i');
     deleteIcon.className = 'fa-solid fa-xmark fa-lg text-red-700';

     
     addedTasks.appendChild(newDIV);
     newDIV.appendChild(newTask);
     deleteTask.appendChild(deleteIcon);
     newDIV.appendChild(deleteTask);
    })
}

// Persist the tasks to store in Local Storage
function storeTaskInLocalStorage(task) {
    let tasks;
    if (localStorage.getItem('tasks') === null) {
        tasks = [];
    }
    else{
       tasks = JSON.parse(localStorage.getItem('tasks'));
    }
    tasks.push(task);
    localStorage.setItem('tasks' , JSON.stringify(tasks));
}
// Add Function
function addTask(e) {
    const taskInputValue = text_input.value;
    if (taskInputValue !== "") {
        // Create a particular div for every task
        const newDIV = document.createElement('div');
        newDIV.className = "task-box-item flex justify-between px-3 ";

        // Li tag (Task)
        var newTask = document.createElement('li');
        newTask.className = "task-list list-none text-l px-4 py-2";
        newTask.textContent = taskInputValue;

        // Delete a particular task (link)
        const deleteTask = document.createElement('a');
        deleteTask.className = "delete_task translate-y-[10px] h-full";
        deleteTask.href = '#';
        
        // Delete a particular task (icon)
        const deleteIcon = document.createElement('i');
        deleteIcon.className = 'fa-solid fa-xmark fa-lg text-red-700';

        
        addedTasks.appendChild(newDIV);
        newDIV.appendChild(newTask);
        deleteTask.appendChild(deleteIcon);
        newDIV.appendChild(deleteTask);
        
        // 仅输入非空时存储到Local Storage
        storeTaskInLocalStorage(taskInputValue);
    }
    else{
        alert('Field empty! NO task added.');
    }
    
    // Set text field to empty again
    text_input.value = '';
    e.preventDefault();
} 

额外建议 #

• 可以给输入框添加trim处理，过滤掉纯空格的输入，比如把判断条件改成if (taskInputValue.trim() !== "")，避免用户输入空格后被当成有效任务存储。
• 注意taskFromLocalStorage函数中如果Local Storage里有之前存入的空字符串，需要先清理掉，否则页面加载时会显示空任务项。你可以在读取Local Storage后过滤空值：

tasks = JSON.parse(localStorage.getItem('tasks')).filter(task => task.trim() !== "");

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