我可以存储在本地存储中，但刷新页面后列表仍然消失？带有 Javascript 的基本待办事项列表应用程序答案

【问题标题】：I can store in LOCAL STORAGE but the lists are still gone after refreshing the page? basic Todo list app with Javascript我可以存储在本地存储中，但刷新页面后列表仍然消失？带有 Javascript 的基本待办事项列表应用程序
【发布时间】：2021-12-14 09:11:44
【问题描述】：

我有一个 JavaScript 待办事项列表练习应用程序，我花了几个小时研究如何将它存储在本地存储中并且它可以工作。

但它并没有出现在待办事项列表的实际HTML页面中？我已经通过从 (localStorage.getItem & JSON.parse) 加载它看到了一些答案，但在我的情况下它仍然不起作用。

const add = document.getElementById("additem")
const remove = document.getElementById("removeitem")
const input = document.getElementById("inputBlank")
const contain = document.getElementById("container")

const LOCAL_STORAGE_PREFIX = "TODO_APP_V1"
const TODOS_STORAGE_KEY = `${LOCAL_STORAGE_PREFIX}- todos`
const todos = loadTodos() // Load from local storage


/// Appending all
add.addEventListener('click', function () {
    let btn = document.createElement('button');
    let paragraph = document.createElement("th");
    btn.innerText="x";
    btn.style.background="";
    paragraph.innerText = input.value;
    if (input.value === "") return
    todos.push(paragraph.innerText) <---
    input.value = "";
    paragraph.appendChild(btn);
    contain.appendChild(paragraph)
    saveTodos() <---

    todos.push(paragraph.innerText)
    btn.addEventListener('click', function () {
        contain.removeChild(paragraph)
    })
    remove.addEventListener('click', function () {
        contain.removeChild(paragraph);

    })

})

///Saving to local storage
function saveTodos() {
    localStorage.setItem(TODOS_STORAGE_KEY, JSON.stringify(todos))
}

//Getting from local storage
function loadTodos() {
    const todos = localStorage.getItem(TODOS_STORAGE_KEY)
    return JSON.parse(todos) || []
}

【问题讨论】：

标签： javascript list append storage local

【解决方案1】：

您没有告诉您的应用程序在页面刷新时显示检索到的待办事项数据。

在每次页面刷新时，您需要从 localStorage 中检索待办事项数据（您已经完成了），并循环遍历数组以显示数据。

您必须在 todos 变量下使用此代码（当检索完成时）

todos.forEach((element) => {
  let paragraph = document.createElement("th");
  paragraph.innerText = element;
  let btn = document.createElement("button");
  btn.innerText = "x";
  paragraph.appendChild(btn);
  contain.appendChild(paragraph);
});

如果您阻止默认点击行为，那将是非常好的。否则点击每一项都会刷新浏览器，看起来不太好。

【讨论】：

谢谢。现在，当尝试刷新时，我的 google chrome/application/localstorage ["1", "2", "2↵x", "3", "3↵x", "4"] 中似乎发生了数组错误。附加项目的列表不是很好。
localStorage 值对我来说看起来不错。你能指定，如何重现这个错误？
啊它现在工作正常。这是我的错误，我的点击功能中有重复的 todos.push(paragraph.innerText)。谢谢楼主：）

【解决方案2】：

刷新后需要重新渲染数据！

function loadTodos() {
    const todos = localStorage.getItem(TODOS_STORAGE_KEY)
    
    todos.forEach(function (element) {
        let btn = document.createElement('button');
        let paragraph = document.createElement("th");
        btn.innerText="x";
        btn.style.background="";
        paragraph.innerText = element;

        btn.addEventListener('click', function () {
            contain.removeChild(paragraph)
        })

        paragraph.appendChild(btn);
        contain.appendChild(paragraph);
    })

    return JSON.parse(todos) || []
}

【讨论】：