时间戳

首页 > 解决方案 > jQuery保存数据并加载每个刷新页面

javascript - jQuery保存数据并加载每个刷新页面

问题描述

嘿，我真的是在 js 中四处走动的新手，看到了一个关于待办事项列表的好代码，并希望将其保存在每个刷新页面中（在本地存储中）。已经尝试过 savy.js 插件，但它并没有真正起作用。正在考虑制作一些 json 文件，但不知道它在 jQuery 中如何工作。这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="list">
  <input type="text" class="txtb" placeholder="Add a task">
  <div class="notcomp">
    <h3>Not Completed</h3>
  </div>
  <div class="comp">
    <h3>Completed</h3>
  </div>
</div>

<script type="text/javascript">
  $(".txtb").on("keyup", function(e) {
    if (e.keyCode == 13 && $(".txtb").val() != "") {
      var task = $("<div class='task'></div>").text($(".txtb").val());
      var del = $("<i class='fas fa-trash-alt'></i>").click(function() {
        var p = $(this).parent();
        p.fadeOut(function() {
          p.remove();
        })
      });
      var check = $("<i class='fas fa-check'></i>").click(function() {
        var p = $(this).parent();
        p.fadeOut(function() {
          $(".comp").append(p);
          p.fadeIn();
        });
        $(this).remove();
      });
      task.append(del, check);
      $(".notcomp").append(task);
      $(".txtb").val("");
    }
  });
</script>

寻求任何帮助。

标签： javascriptjqueryhtml

解决方案

尝试此代码或查看任务列表中的示例

HTML

<div class="list">
  <input type="text" class="txtb" placeholder="Add a task">
  <div class="notcomp">
    <h3>Not Completed</h3>
  </div>
  <div class="comp">
    <h3>Completed</h3>
  </div>
</div>

jQuery

$(document).ready(function() {
  var data = localStorage.getItem("todo");
  if (data != "" && data != null) {
    data = JSON.parse(data);
    for (const [key, value] of Object.entries(data)) {
      insertTask(value);
    }
  } else {
    data = [];
  }

  function insertTask(data) {
    var task = $("<div class='task'></div>").text(data.value);
    var del = $("<i class='fa fa-trash' ></i>").click(function() {
      removeData(data.id);
      $(this)
        .parent(".task")
        .fadeOut("slow", function() {
          $(this).remove();
        });
    });

    task.append(del);
    $(".notcomp").append(task);
  }

  function removeData(id) {
    console.log(id);
    for (const [key, value] of Object.entries(data)) {
      if (value.id === id) {
        data.splice(key, 1);
        localStorage.setItem("todo", JSON.stringify(data));
        return false;
      }
    }
  }
  $(".txtb").on("keyup", function(e) {
    if (e.keyCode == 13 && $(".txtb").val() != "") {
      let val = $(".txtb").val();

      var unix = Math.round(+new Date() / 1000);
      var taskData = {
        value: val,
        id: unix
      };
      data.push(taskData);
      insertTask(taskData);
      localStorage.setItem("todo", JSON.stringify(data));
      $(".txtb").val("");
    }
  });
});

推荐阅读