待办事项列表上的本地存储答案

【问题标题】：Local Storage on a to do list待办事项列表上的本地存储
【发布时间】：2021-08-09 20:26:20
【问题描述】：

这是一个典型的待办事项列表。可以添加或删除项目，它是这样工作的，但不幸的是，当我刷新它时它消失了。我想使用 localStorage 功能来解决这个问题。我设法创建了一个存储项目的数组。现在我想在浏览器中显示存储在tasks 中的项目。当我加载document.addEventListener('DOMContentLoaded', getTasks)，尤其是getTasks() 时，我遇到了困难。我设置了console.log('bonjour')，来测试它，它没有通过。

谢谢你，一如既往

function getTasks() {
    console.log('bonjour')

    let tasks;
        if(localStorage.getItem('tasks') === null) {
            tasks = [];
        } else {
            tasks = JSON.parse(localStorage.getItem('tasks'));
        }
        tasks.forEach(task => {
            const html = `
            <li>
                <span>${task}</span>
                <i class="far fa-trash-alt delete"></i>
            </li>`
            list.innerHTML += html;
            console.log('hi')
        });
}

<!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">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <title>Todolist</title>
</head>
<body>
    <form action="" class="add">
        <h1>To do list</h1>
        
        <input type="text" id="name" name="add" placeholder="Enter name here"> 
     
    </form>

    <ul class="todos">
        <li>
            <span>marco</span>
            <i class="far fa-trash-alt delete"></i>
        </li> 
    </ul>


    <script src="app.js"></script>
</body>
</html>

【问题讨论】：

尝试 document.addEventListener("load", getTasks) 或 window.addEventListener("load", getTasks)
你的意思是 document.addEventListener('DOMContentLoaded', getTasks) 不能进入 getTasks 方法吗？或者你在问 localStorage 不能正常工作
因为他一开始有一个console.log 也没有触发，所以似乎整个getTasks 函数没有被调用
它应该按预期触发。 jsfiddle.net/ramseyfeng/198xso4z
@huanfeng 我猜的整个事情

标签： javascript local-storage

【解决方案1】：

function getTasks() {
  console.log('bonjour')

  let tasks
  if (localStorage.getItem('tasks') === null) {
    tasks = []
  } else {
    tasks = JSON.parse(localStorage.getItem('tasks'))
  }
  let list = document.getElementById('theList')
  tasks ? .forEach((task) => {
    const html = `
              <li>
                  <span>${task}</span>
                  <i class="far fa-trash-alt delete"></i>
              </li>`
    list.innerHTML += html
    console.log('hiiiii')
  })
}

function storeValue(val) {
  if (!val) return
  if (!localStorage.getItem('tasks')) {
    let tasks = []
    tasks.push(val)
    localStorage.setItem('tasks', JSON.stringify(tasks))
    getTasks()
  } else {
    let tasks = JSON.parse(localStorage.getItem('tasks'))
    tasks.push(val)
    localStorage.setItem('tasks', JSON.stringify(tasks))
    getTasks()
  }
}

getTasks()

<!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">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <title>Todolist</title>
</head>

<body>
  <!-- <form action="" class="add"> -->
  <h1>To do list</h1>

  <input type="text" id="name" name="add" placeholder="Enter name here" onchange="storeValue(this.value)">

  <!-- </form> -->

  <ul class="todos" id="theList">
    <li>
      <span>marco</span>
      <i class="far fa-trash-alt delete"></i>
    </li>
  </ul>


  <script src="app.js"></script>
</body>

</html>

这里是解决方案，在您的本地系统上尝试一下，您会得到一个错误，因此最好在您自己的系统上进行测试。同时清理我刚刚解决问题的代码

【讨论】：

不幸的是仍然没有触发 console.log('bonjour')。我也在line11上发现了一个错误，但是即使修复了，错误仍然存在
你能告诉我你在哪里测试
VS 代码和 Chrome。问题是添加item1的时候就ok了。然后在添加 item2 时，代码再次添加 item1 和 item2。添加item3时，代码添加了item1、item2和item3等等。出于好奇，输入中的onchange="storeValue(this.value)是什么意思？非常感谢