每日一练 JS30天挑战每日清单_30天挑战清单下班后-CSDN博客

本文链接：https://blog.csdn.net/qq_44692240/article/details/109319084

每日清单

实现目标

输入每日活动到输入框，点击按钮，会在上面显示每日活动
刷新网页数据还在

实现逻辑

Array.map()来处理数据，处理出对面的列表字符串
数据保存在本地的localStorage中

实现代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>LocalStorage</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="wrapper">
    <h2>每日清单</h2>
    <p></p>
    <ul class="tasks">
      <li>加载清单...</li>
    </ul>
    <form class="add-tasks">
      <input type="text" name="task" placeholder="" required>
      <input type="submit" value="+ 添加">
    </form>
  </div>
  

  <script>
    const taskList = document.querySelector('.tasks');
    const addTasks = document.querySelector('.add-tasks');
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    console.log(tasks,typeof tasks)
    // 添加一个task
    function addTask(e) {
      //取消默认操作
      e.preventDefault();
      const text = (this.querySelector('[name=task]')).value;
      const task = {
        text,
        done: false
      }
      tasks.push(task);
      showTask(tasks, taskList);
      // 保存task数组到本地存储
      localStorage.setItem('tasks', JSON.stringify(tasks));
      //重置输入
      this.reset();
    }

    // 渲染 task
    function showTask(tasks = [], taskList) {
      taskList.innerHTML = tasks.map((task, i) => {
        return `
        <li>
          <input type="checkbox" data-index=${i} id="task${i}" ${task.done ? 'checked' : ''} />
          <label for="task${i}">${task.text}</label>
        </li>
      `;
      }).join('');
    }

    function toggleDone(e) {
      const el = e.target;
      // 过滤掉不是 CheckBox 的元素
      if (!el.matches('input')) return;
      const index = el.dataset.index;
      // 更新 task 的 done 属性
      tasks[index].done = !tasks[index].done;
      console.log(tasks[index].done);
      localStorage.setItem('tasks', JSON.stringify(tasks));
      showTask(tasks, taskList);
    }

    addTasks.addEventListener('submit', addTask);

    taskList.addEventListener('click', toggleDone);
    showTask(tasks, taskList);
  </script>


</body>

</html>

实现效果

在这里插入图片描述

总结

方法名	作用
localStorage.getItem()	保存对象到localStorage
localStorage.removeItem()	从localStorage中删除对象
localStorage.clear()	清除localStorage中的对象