待办事项列表 JavaScript答案

【问题标题】：To-do list JavaScript待办事项列表 JavaScript
【发布时间】：2022-01-29 03:14:29
【问题描述】：

我正在尝试制作待办事项列表，但我被本地存储卡住了。重新加载页面时没有任何显示。我认为这是关于 changeStorage() 方法，但我不完全理解我做错了什么。

function addTask() {
    let addTaskButton = document.getElementById('add-task-button')
    let list = document.getElementById('task-list');
    let li = document.createElement('li');
    let checkbox = document.createElement('input');
    let taskText = document.createElement('span');
    let delButton = document.createElement('button');
    let btnText = document.createTextNode('Delete task');

    checkbox.addEventListener('change', changeStorage);
    checkbox.type = 'checkbox';
    checkbox.className = 'checkbox';
    taskText.innerText =  document.getElementById('input-task').value;
    taskText.className = 'task';
    delButton.className = 'delete-btn';
    delButton.onclick = deleteTask;
    addTaskButton.addEventListener('click', changeStorage);

    delButton.appendChild(btnText);
    li.appendChild(checkbox);
    li.appendChild(taskText);
    li.appendChild(delButton);
    list.appendChild(li);

    document.getElementById('input-task').value = '';
}

function changeStorage() {
    let tasks = document.getElementById('ul').innerHTML;
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function deleteTask () {
    this.parentNode.remove();
    changeStorage();
}

document.getElementById('add-task-button').addEventListener('click', addTask);

function loadList() {
    document.querySelector('ul').innerHTML = JSON.parse(localStorage.getItem("tasks")) || [];
}

window.addEventListener('load', loadList);

【问题讨论】：

您不需要使用 JSON.stringify 将原始 HTML 存储在 localStorage 中。检查您的浏览器控制台是否有错误。此外，如果您只是将待办事项列表中每个项目的值存储为一个数组，而不是转储原始 HTML，可能会更好：它效率低下且臃肿。
JSON.parse 仅适用于 JSON 字符串，而不适用于 HTML 字符串。

标签： javascript local-storage

【解决方案1】：

这应该将存储在 localStorage 中的内容更改为有效的 JSON 字符串，然后在加载时从中重建 LI 元素。

function changeStorage() {
    let tasks = [...document.querySelectorAll("ul li")].map(t => t.innerHTML);
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function loadList() {
    document.querySelector('ul').innerHTML = (JSON.parse(localStorage.getItem("tasks")) || []).map(t => "<li>" + t + "</li>").join("");
}

【讨论】：