为什么我的待办事项列表在本地存储中可见而不是在屏幕上？

问题描述 投票：0回答：2

我用 JavaScript 制作了一个待办事项列表。一切正常。当添加待办事项时，它在本地存储中可见，当删除它时，它会从本地存储中删除。但我必须刷新页面才能在屏幕上看到这个结果。我必须为此使用 location.reload() 。为什么我不能直接看到？哪里有问题 ？ 如何在不使用 location.reload 的情况下在屏幕上看到结果？ 

const form = document.querySelector('form');
const input = document.querySelector('.inp')

const addToDo = (e) => {

    e.preventDefault()
    const inputValue = input.value;

    let tasks;

    if (localStorage.getItem('tasks') === null) {
        tasks = []
    }
    else {
        tasks = JSON.parse(localStorage.getItem('tasks'))
    }

    tasks.push(inputValue)
    console.log(inputValue);


    localStorage.setItem('tasks', JSON.stringify(tasks))

    input.value = ''
     // location.reload()
}

form.addEventListener('submit', addToDo)

const tasks = JSON.parse(localStorage.getItem('tasks'))


tasks.map((task, index) => {
    return (
        document.querySelector('ol').innerHTML += `
    <li>${task}  <button onclick='del(${index})' class='btn' >X</button></li>
    `
    )
})


const del = (e) => {

    const btns = document.querySelectorAll('.btn')
    let filteredArray = tasks.filter((data, index) => {
        return index !== e;
    })
    localStorage.setItem('tasks', JSON.stringify(filteredArray))
    // location.reload()
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <form action="">
        <input type="text" class="inp">
        <button>Add todo</button>
    </form>
    <ol>
        
    </ol>
    <script src="script.js"></script>
</body>

</html>

javascript arrays local-storage reload
2个回答
0
投票

您的代码的问题是您在加载浏览器窗口期间仅更新列表一次。一个可能的解决方案是创建一个更新innerHtml的函数，并在三个地方调用该函数：每次页面加载（如您的示例中）、添加新任务后以及删除任务后。

const form = document.querySelector('form');
const input = document.querySelector('.inp')

const addToDo = (e) => {

  e.preventDefault()
  const inputValue = input.value;

  let tasks;

  if (localStorage.getItem('tasks') === null) {
    tasks = []
  } else {
    tasks = JSON.parse(localStorage.getItem('tasks'))
  }

  tasks.push(inputValue)
  console.log(inputValue);


  localStorage.setItem('tasks', JSON.stringify(tasks))

  input.value = ''
  // location.reload()
  updateTaskList()
}

form.addEventListener('submit', addToDo)

function updateTaskList() {
  const tasks = JSON.parse(localStorage.getItem('tasks'))
  document.querySelector('ol').innerHTML = ''

  tasks.map((task, index) => {
    return document.querySelector('ol').innerHTML += `
    <li>${task}  <button onclick='del(${index})' class='btn' >X</button></li>
    `
  })
}

updateTaskList()



const del = (e) => {

  const tasks = JSON.parse(localStorage.getItem('tasks'))

  const btns = document.querySelectorAll('.btn')
  let filteredArray = tasks.filter((data, index) => {
    return index !== e;
  })
  localStorage.setItem('tasks', JSON.stringify(filteredArray))
  // location.reload()
  updateTaskList()
}

0
投票

提交表单后，您必须将新元素添加到列表中。

const addToDo = (e) => {

    e.preventDefault()
    const inputValue = input.value;

    let tasks;

    if (localStorage.getItem('tasks') === null) {
        tasks = []
    }
    else {
        tasks = JSON.parse(localStorage.getItem('tasks'))
    }

    tasks.push(inputValue)
    console.log(inputValue);


    localStorage.setItem('tasks', JSON.stringify(tasks))

    input.value = ''
     // location.reload()
     
    // HERE 
    document.querySelector('ol').innerHTML += `
    <li>${inputValue}  <button onclick='del(${tasks.length - 1})' class='btn' >X</button></li>
    `
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.