Question

我创建了一个表单页面，要求用户输入他/她已通过的课程数量。我能够轻松地根据用户输入创建字段（例如，如果用户输入2门课程，则表单将显示2个额外的框，以输入每门课程的课程详细信息），但是我不知道如何存储用户将为每门课程提供信息，以便我以后可以显示已通过课程的报告。这是我到目前为止所做的。

<label >No. of courses passed</label>
<input type="text"  placeholder="Number of courses" id="noCourses">
<div id="divID"></div>
<input type="button" value="Continue" onclick="courseBoxGenerator()" id="continueBtn">

和我的脚本：

function courseBoxGenerator() {
  var getNumberOfCourses = document.getElementById("noCourses").value;
  var newDiv = document.getElementById("divID");

  for (var i = 0; i <getNumberOfCourses; i++) {
    var inputCourseTitle = document.createElement("input");
    var inputMarkReceived = document.createElement("input");
    inputCourseTitle.type = "text";
    inputMarkReceived.type = "text";
    inputCourseTitle.placeholder = "Course Title"
    inputMarkReceived.placeholder = "Mark received in the course"

    var labelCreator = document.createElement("label");
    newDiv.appendChild(labelCreator);
    labelCreator.innerHTML = "Course No" + (i + 1);

    newDiv.appendChild(inputCourseTitle);
    newDiv.appendChild(inputMarkReceived);
  }
}

Answer 1

首先，您希望在附加到DOM之前为每个生成的输入框赋予唯一的ID（即，在附加之前将其添加到for循环中）

  inputCourseTitle.id = `inputCourseTitle${i}`;
  inputMarkReceived.id = `inputMarkReceived${i}`;

然后，如果需要使用这些ID，可以稍后再参考。

关于存储，正如人们所说的那样，这是一个相当广泛的问题，但通常涉及使用PHP，Node.js，Ruby on Rails或某些其他服务器的某种后端-辅助语言/框架。您还可以将它们与MySQL，MongoDB或Postgres之类的数据库耦合，以更安全的方式存储数据，然后可以使用服务器对其进行访问。

如果您不想执行任何操作，也可以使用localStorage或sessionStorage将数据存储在浏览器的本地存储中（localStorage将无限期存储数据，而sessionStorage仅将其存储在当前会话中，即直到浏览器标签关闭）。

如果要在localStorage中存储某些内容，可以执行以下操作：

localStorage.setItem("item_name", "item_value");

以后，如果要访问它，可以执行以下操作：

var x = localStorage.getItem("item_name");

（如果您愿意的话，也可以将localStorage替换为以上的sessionStorage）。

但是请记住，不应将本地存储用作数据库来存储用户信息。如果要存储重要/个人数据，则应使用后端以及如上所述的安全数据库。我建议将PHP和MySQL作为一个好的起点。

希望这会有所帮助！

如何保存动态添加的HTML字段的数据

1 个答案: