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

Question

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

    }

})