浏览器刷新后如何让localstorage数据留在页面上

Question

我目前正在创建一个待办事项应用程序，它允许用户将信息输入表单并在提交后，信息显示为项目符号列表项。我已经做到了每次提交都保存到localStorage，但是如何在浏览器刷新后也维护页面上的列表项？

这是我的 JS

const submitButton = document.querySelector('#stuff');

const ul = document.querySelector('ul')

const text = document.querySelector('#textbox');

const todoArr = []

// const todoArr = localStorage.getItem('todos') ? JSON.parse(localStorage.getItem('todos')):[]

submitButton.addEventListener('submit', function(e){

    e.preventDefault();

    if(text.value !== '') {

        const addLi = document.createElement('li');

        const deleteBtn = document.createElement('button');

        deleteBtn.innerText = 'remove';

        addLi.innerText = text.value;

        addLi.appendChild(deleteBtn);

        ul.appendChild(addLi);

        // todoArr.push(text.value)

        localStorage.setItem('todos', JSON.stringify(todoArr))

        text.value = '';

    }

})

ul.addEventListener('click', function(e) {

    if(e.target.tagName === 'BUTTON') {

        e.target.parentElement.remove();

    } else if(e.target.tagName === 'LI'){

        e.target.classList.toggle('strike-thru')

    }

})

Answer 1

使用为列表创建新列表项的代码，并将其放在单独的函数中。我们称该函数为createTodoItem。当文档加载时，从中获取存储的待办事项localStorage并循环遍历每个值。然后对每个值调用createTodoItem并传递该值以创建一个新项目。const submitButton = document.querySelector('#stuff');const ul = document.querySelector('ul')const text = document.querySelector('#textbox');const storedTodos = localStorage.getItem('todos')const todoArr = storedTodos !== null ? JSON.parse(storedTodos) : [];function createTodoItem(value) {  const addLi = document.createElement('li');  const deleteBtn = document.createElement('button');  deleteBtn.innerText = 'remove';  addLi.innerText = value;  addLi.appendChild(deleteBtn);  ul.appendChild(addLi);}todoArr.forEach(createTodoItem);同时修改您的submit侦听器以使用新功能。现在您已经获得了可以在脚本中的任何位置调用的可重用函数。submitButton.addEventListener('submit', function(e){    e.preventDefault();    if(text.value !== '') {        createTodoItem(text.value);        todoArr.push(text.value)        localStorage.setItem('todos', JSON.stringify(todoArr))        text.value = '';    }})ul.addEventListener('click', function(e) {    if(e.target.tagName === 'BUTTON') {        e.target.parentElement.remove();    } else if(e.target.tagName === 'LI'){        e.target.classList.toggle('strike-thru')    }})