JavaScript实现浏览器刷新后本地存储任务列表持久化

你的代码存在几个关键问题，导致刷新页面后任务无法从localStorage加载显示，同时删除任务也未同步更新存储。以下是修复方案及完整代码：

关键修复点 #

• 修正localStorage读写逻辑：原getItems函数中存在变量使用错误和语法错误，无法正确存储/读取任务
• 添加页面初始化渲染：新增页面加载时读取localStorage并渲染所有任务的函数
• 同步删除操作到存储：删除任务时同时更新localStorage中的任务列表

修复后的完整代码 #

// task list section
const taskBtn = document.querySelector('.btn-blue');
const addTask = document.querySelector('.main-content');
let taskPanel;
let taskPara;
let deletebtn;

// 页面加载时渲染已保存的任务
document.addEventListener('DOMContentLoaded', renderTasks);

//Event Listeners
taskBtn.addEventListener('click', addPanel);

function addPanel(event) {
    const addInput = document.querySelector('input');
    // 输入为空时不添加任务
    if (!addInput.value.trim()) return;
    
    //Create div section
    createDiv();
    // Create paragraph
    createPara(addInput.value);
    //create buttons
    checkList();
    createBtn();
    removeContent();

    // 保存任务到localStorage
    saveTaskToLocalStorage(addInput.value);
    addInput.value = '';
};

//functions
//Create Div
function createDiv() {
    taskPanel = document.createElement('ul');
    taskPanel.setAttribute('class', 'task-added');
    //set css styles
    taskPanel.style.cssText = "display: flex; background-color: white; border: 2px solid #000; border-radius: 5px; margin-top: 2rem; align-items: center; justify-content: space-between;"
    addTask.appendChild(taskPanel);
}

//Create Paragraph - 修改为接收任务文本参数
function createPara(taskText) {
    taskPara = document.createElement('li');
    taskPara.classList.add('para-1');
    taskPara.innerText = taskText;
    taskPara.style.cssText = "display: flex; width: 80%; height: 50%; margin-left: 2rem; align-items: center;"
    taskPanel.appendChild(taskPara);
}

function checkList() {
    const check = document.createElement('div');
    check.classList.add('check-box');
    check.innerHTML = '<form><input type="radio"></form>';
    taskPanel.appendChild(check);
    check.addEventListener('click', () => {
        taskPara.style.textDecoration = "line-through";
    })
}

//Create Button
function createBtn() {
    deletebtn = document.createElement('button');
    deletebtn.setAttribute('class', 'btn-icon');
    deletebtn.innerHTML = '<i class="fa-solid fa-trash"></i>';
    //set css styles
    deletebtn.style.cssText = "background-color: yellow; color: red; font-size: 1.5em; border: none; outline: none; padding: 1rem; cursor: pointer;";
    taskPanel.appendChild(deletebtn);
}

function removeContent() {
    deletebtn.addEventListener('click', (event) => {
        const taskElement = event.target.closest('.task-added');
        const taskText = taskElement.querySelector('.para-1').innerText;
        // 移除DOM元素
        taskElement.remove();
        // 从localStorage中删除对应任务
        removeTaskFromLocalStorage(taskText);
    });
}

// 保存任务到localStorage
function saveTaskToLocalStorage(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));
}

// 从localStorage删除任务
function removeTaskFromLocalStorage(taskToDelete) {
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    // 过滤掉要删除的任务
    tasks = tasks.filter(task => task !== taskToDelete);
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// 渲染localStorage中的任务到页面
function renderTasks() {
    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.forEach(task => {
        createDiv();
        createPara(task);
        checkList();
        createBtn();
        removeContent();
    });
}

代码说明 #

1. DOMContentLoaded事件：页面加载完成后自动调用renderTasks函数，读取localStorage中的任务并逐个创建DOM元素
2. 修正存储逻辑：将原getItems函数拆分为saveTaskToLocalStorage和removeTaskFromLocalStorage，明确读写逻辑，避免变量混淆
3. 任务创建函数优化：createPara改为接收任务文本参数，方便渲染已保存任务时复用
4. 空输入判断：添加输入为空时不创建任务的逻辑，避免无效存储

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