发生与本地存储（JS）相关的错误

Question

我一直在使用 JS 开发（任务列表）项目。我遇到了与 JS 相关的错误。 错误： “本地存储在数组中存储一个空（空）字符串，尽管它存储一个非空字符串（工作正常），但对于空字符串，我在代码中设置了一个条件（粘贴在下面）。”

代码：

// 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() {
    var taskInputValue = text_input.value;
    let tasks;
    if (localStorage.getItem('tasks') === null) {
        tasks = [];
    }
    else{
       tasks = JSON.parse(localStorage.getItem('tasks'));
    }
    tasks.forEach(function(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]";
     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);
    }
    else{
        alert('Field empty! NO task added.');
        localStorage.removeItem(taskInputValue); 

    }
    // Set to LS
    storeTaskInLocalStorage(taskInputValue);
    
    // Set text field to empty again
    text_input.value = '';
    e.preventDefault();
} 

我已经从 ChatGPT 获得了帮助，但它对我来说无论如何都不起作用。

Answer 1

错误源于

addTask

函数。当

taskInputValue

不是空字符串时，需要执行两个操作：

1. 在屏幕上渲染新任务。
2. 将新任务添加到

   localStorage

   。

您仅对空字符串执行

if check

内的第一个操作。第二个动作当前在

if else block

之外执行，这意味着

taskInputValue

将被添加到

localStorage

，无论它是否是非空字符串。您需要将添加任务的代码移动到

localStorage

内的

if check

。

addTask

函数将如下所示：

// 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);

        // Set to LS
        storeTaskInLocalStorage(taskInputValue);
    }
    else{
        alert('Field empty! NO task added.');
        localStorage.removeItem(taskInputValue); 

    }
    
    // Set text field to empty again
    text_input.value = '';
    e.preventDefault();
}