JQuery сохранение данных и загрузка каждой страницы обновления

Question

Эй, я действительно новичок, прогуливаясь по 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>

Обращайтесь за любой помощью.

Answer 1

попробуйте этот код или посмотрите пример в Список задач

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("");
    }
  });
});