在js中上传和下载按钮待办事项列表（如文本文件）

Question

我有一个简单的待办事项列表，我想添加下载功能，然后上传一个。例如我想在服务器代码中添加这个函数。首先，我想将我的待办事项列表保存在本地存储中，然后上传并下载它。这是我的代码的链接。有人可以帮我吗？ https://jsfiddle.net/zahrashokri/uqkn6t3y/3 这是我的 js 代码：

var todoButton = document.querySelector(".todo-button");
var todoList = document.querySelector(".todo-list");
var filterOption = document.querySelector(".filter-todo");
//Event listeners
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("click", filterTodo);

function addTodo(event) {
  event.preventDefault();
  var todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");
  var newTodo = document.createElement("li");
  newTodo.innerText = todoInput.value;
  newTodo.classList.add("todo-item");
  todoDiv.appendChild(newTodo);
  var completedButton = document.createElement("button");
  completedButton.innerHTML = '<i class="fas fa-check"></i>';
  completedButton.classList.add("complete-btn");
  todoDiv.appendChild(completedButton);
  var trashButton = document.createElement("button");
  trashButton.innerHTML = '<i class= "fas fa-trash"></i>';
  trashButton.classList.add("trash-btn");
  todoDiv.appendChild(trashButton);
  var editButton = document.createElement("button");
  editButton.innerHTML = '<i class= "fas fa-edit"></i>';
  editButton.classList.add("edit-btn");
  todoDiv.appendChild(editButton);
  todoList.appendChild(todoDiv);
  todoInput.value = "";
}

function deleteCheck(e) {
  var item = e.target;
  if (item.classList[0] === "trash-btn") {
    var todo = item.parentElement;
    todo.remove();
  }
  if (item.classList[0] === "complete-btn") {
    var todo = item.parentElement;
    todo.classList.toggle("completed");
  }

  //if  (item.classList[0]==="edit-btn"){

  //}

}


function filterTodo(e) {
  var todos = todoList.childNodes;
  todos.forEach(function(todo) {
    switch (e.target.value) {
      case "all":
        todo.style.display = "flex";
        break;
      case "completed":
        if (todo.classList.contains("completed")) {
          todo.style.display = "flex";
        } else {
          todo.style.display = "none";
        }
        break;
      case "uncompleted":
        if (!todo.classList.contains("completed")) {
          todo.style.display = "flex";
        } else {
          todo.style.display = "none";
        }
        break;
    }
  });
}```

Answer 1

为了能够在网站上编写上传或下载功能，我们必须使用此对象及其方法。以下网站将有助于阅读有关此https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest 的更多信息 。为了让下载和上传成为可能，我们还要在与服务器相关的代码中编写与请求相关的代码，这样才能在服务器上正确执行与上传和下载相关的操作。要了解更多相关信息，您可以访问 W3schools 网站上 node.js 上的上传文件部分。我把代码链接放在 github.com 上与下载和上传到 Todo-List 的可能性有关 https://github.com/shokri1371/todo_upload-download_step4