todolist（网页版记事本）

最新推荐文章于 2025-04-21 19:48:42 发布

fusheng_cn

最新推荐文章于 2025-04-21 19:48:42 发布

阅读量1.7k

点赞数

分类专栏：前端 css3 JavaScript 文章标签：前端 javascript jquery

本文链接：https://blog.youkuaiyun.com/fusheng_cn/article/details/125957649

版权

前端同时被 3 个专栏收录

29 篇文章

订阅专栏

JavaScript

17 篇文章

订阅专栏

css3

7 篇文章

订阅专栏

这篇博客介绍了一个网页版的记事本应用，名为todolist。用户可以输入任务并保存到本地存储，确保数据在浏览器关闭后仍能保留。此应用依赖于jQuery库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用户可以在输入框中输入一个周期内需要做的事情，在按下回车时会保存至本地存储，即使浏览器关闭也不会丢失数据

注：该案例需引入jquery.min.js，请提前下载

tudolist.html（首页结构代码）

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/jquery.min.js"></script>
    <script src="js/todolist.js"></script>
  </head>

  <body>
    <header>
      <section>
        <label for="title">ToDoList</label>
        <input
          type="text"
          id="title"
          name="title"
          placeholder="添加ToDo"
          required="required"
          autocomplete="off"
        />
      </section>
    </header>
    <section>
      <h2>正在进行 <span id="todocount"></span></h2>
      <ol id="todolist" class="demo-box"></ol>
      <h2>已经完成 <span id="donecount"></span></h2>
      <ul id="donelist"></ul>
    </section>
    <footer>Copyright &copy; 2014 todolist.cn</footer>
  </body>
</html>

tudolist.js代码

$(function () {
  //   alert(11);
  //   1. 按下回车 把完整数据 存储带本地存储里面
  // 存储的数据格式  var todolist = [{title: "xxx", done: false}]
  load();
  $("#title").on("keydown", function (event) {
    if (event.keyCode === 13) {
      if ($(this).val() === "") {
        alert("内容不能为空，请重新输入");
      } else {
        //   先读取本地存储原来的数据
        var local = getDate();
        //   console.log(local);
        //   把local数组进行更新数据 把最新的数据追加给local数组
        local.push({ title: $(this).val(), done: false });
        //   把这个数组local 存储给本地存储
        saveDate(local);
        //   toDoList 本地存储数据渲染加载到页面
        load();
        $(this).val("");
      }
    }
  });
  // toDoList 删除操作
  $("ol, ul").on("click", "a", function () {
    // 先获取本地存储的数据
    var data = getDate();
    // console.log(data);

    // 修改数据
    var index = $(this).attr("id");
    // console.log(index);
    data.splice(index, 1);

    // 保存到本地存储
    saveDate(data);

    // 重新渲染页面
    load();
  });
  // toDoList 正在进行和已完成选项操作
  $("ol, ul").on("click", "input", function () {
    // 先获取本地存储的数据
    var data = getDate();
    // 修改数据
    var index = $(this).siblings("a").attr("id");
    // data[?].done = ?
    data[index].done = $(this).prop("checked");
    // console.log(data);
    // 保存到本地存储
    saveDate(data);
    // 重新渲染页面
    load();
  });
  //   读取本地存储的数据
  function getDate() {
    var data = localStorage.getItem("todolist");
    if (data !== null) {
      //  本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
      return JSON.parse(data);
    } else {
      return [];
    }
  }
  //   保存本地存储数据
  function saveDate(data) {
    localStorage.setItem("todolist", JSON.stringify(data));
  }
  //   渲染加载数据
  function load() {
    // 读取本地存储的数据
    var data = getDate();
    // console.log(data);
    // 遍历之前先清空ol里面的元素内容
    $("ol, ul").empty();
    var todoCount = 0; // 正在进行的个数
    var doneCount = 0; // 已经完成的个数
    // 遍历这个数据
    $.each(data, function (i, n) {
      //   console.log(n);
      if (n.done) {
        $("ul").prepend(
          "<li> <input type='checkbox' checked='checked'> <p>" +
            n.title +
            "</p> <a href='javascript:;' id=" +
            i +
            "></a></li>"
        );
        doneCount++;
      } else {
        $("ol").prepend(
          "<li> <input type='checkbox' > <p>" +
            n.title +
            "</p> <a href='javascript:;' id=" +
            i +
            "></a></li>"
        );
        todoCount++;
      }
    });
    $("#todocount").text(todoCount);
    $("#donecount").text(doneCount);
  }
});