Question

抱歉，如果代码很麻烦我是一个非常新的“开发人员”

所以，我创建了一个表单，当你点击提交3件事时： 1.输入值存储在localStorage中的数组中。 2.检索值并以动态创建的div显示。 3.防止提交（表格未发送）。

https://codepen.io/jupiterisland/pen/Rjygmv

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <h1>My Task Board</h1>
    <div class="container">
      <form onsubmit="return submitFunc()">
        <div class="form-group">
          <label for="">Task:</label>
          <textarea name="name" rows="8" cols="80"></textarea>
        </div>
        <div class="form-group">
          <label for="">Deadline:</label>
          <input type="datetime-local">
        </div>
        <div class="form-group">
          <label for="">important:</label>
          <input type="checkbox" name="" value="">
        </div>
        <div class="form-group">
          <button type="submit" name="button">Add Task</button>
        </div>
      </form>
    </div>
  </div>
  <div id="taskBoard"></div>

<script>
    var taskList = []; //build array

    function submitFunc() {
      var task = {
        //build objects
        desc: document.getElementsByTagName("textarea")[0].value,
        time: document.getElementsByTagName("input")[0].value,
        important: document.getElementsByTagName("input")[1].checked
      };

      taskList[taskList.length] = task; //put objects inside array
      localStorage.taskList = JSON.stringify(taskList); //store array with stringify
      newTaskList = JSON.parse(localStorage.taskList); //retrieve array with parse

      for (i = 0; i < newTaskList.length; i++) {
        // display objects in divs

        var noteNode = document.createElement("div");
        var titleNode = document.createElement("h3");
        var pNode = document.createElement("p");
        var descNode = document.createTextNode(newTaskList[i].desc);
        var timeNode = document.createTextNode(newTaskList[i].time);
        titleNode.appendChild(descNode);
        pNode.appendChild(timeNode);
        noteNode.appendChild(titleNode);
        noteNode.appendChild(pNode);

        document.getElementById("taskBoard").appendChild(noteNode); //display divs

        if (taskBoard.childElementCount > newTaskList.length) {
          //remove excess divs
          for (n = 0; taskBoard.childElementCount - 2; n++) {
            taskBoard.removeChild(taskBoard.firstChild);
          }
        }
      }
      return false; //prevent submit
    }
</script>
</body>
</html>

我的问题是每当我提交新条目后刷新页面时，动态创建的div消失（而它们仍然存储在localStorage中）。即使刷新后如何保留我提交的div？

我会感激任何帮助/建议！感谢。

Answer 1

如果存在localStorage.taskList，则分配createDivs函数：

if(localStorage.taskList){ taskList = JSON.parse(localStorage.taskList) || []; createDivs(taskList) }

创建Divs功能是SubmitFunc（）的一部分，您可以在其中创建div：

function createDivs(newTaskList){
  for (i = 0; i < newTaskList.length; i++) {
    var noteNode = document.createElement("div");
    var titleNode = document.createElement("h3");
    var pNode = document.createElement("p");
    var descNode = document.createTextNode(newTaskList[i].desc);
    var timeNode = document.createTextNode(newTaskList[i].time);
    titleNode.appendChild(descNode);
    pNode.appendChild(timeNode);
    noteNode.appendChild(titleNode);
    noteNode.appendChild(pNode);

    document.getElementById("taskBoard").appendChild(noteNode); //display divs

    if (taskBoard.childElementCount > newTaskList.length) {
      //remove excess divs
      for (n = 0; taskBoard.childElementCount - 2; n++) {
        taskBoard.removeChild(taskBoard.firstChild);
      }
    }
  }
}

动态DIV在刷新时消失了吗？ [仅限JS]

1 个答案: