Question

所以我设法将一组对象存储在本地存储中。我现在要完成的是从本地存储中检索对象属性并将它们插入到自己的表格单元格中，这样只要数据在本地存储中（在刷新或窗口关闭之后）它们就会保留在那里。 / p>

我希望动态生成表，行数等于数组中对象的数量（一行3个单元格来显示数据）。

这是我到目前为止所提出的;我可以在本地存储中看到对象数组和对象的属性，但在页面重新加载后仍然没有运气。

var courseArray = [];
window.onload = init;

function addCourse() {
  var course = {
    name: document.getElementById("courseName").value,
    number: document.getElementById("courseNumber").value,
    room: document.getElementById("room").value
  };
  courseArray = JSON.parse(localStorage.getItem("course")) || [];

  courseArray.push(course);
  localStorage.setItem("course", JSON.stringify(courseArray));
  courseArray = localStorage.getItem("course");
  courseArray = JSON.parse(courseArray);
  
  var row = enrolled.insertRow(1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);

  for (i = 0; i <= courseArray.length; i++) {
    cell1.innerHTML = courseArray[i].name;
    cell2.innerHTML = courseArray[i].number;
    cell3.innerHTML = courseArray[i].room;
  }
}

function clearData() {
  localStorage.clear();
}

function createSchedule(course) {
  var table = getElementById("enrolled");
  var row = document.createElement("tr");
  var cell1 = document.createElement("td");
  var cell2 = document.createElement("td");
  var cell3 = document.createElement("td");
  cell1.innerHTML = course.name;
  cell2.innerHTML = course.number;
  cell3.innerHTML = course.room;
}

function getCourseArray() {
  var courseArray = localStorage.getItem("course");
  return courseArray;
}

function init() {
  var courseArray = getCourseArray();
  for (i = 0; i < courseArray.length; i++) {
    var course = courseArray[i];
    createSchedule(course);
  }
}

<html>

<head>
  <link type="text/css" rel="stylesheet" href="StudentStyle.css">
  <title>Student Page</title>
  <script type="text/javascript">
    src = "registerBox.js"
  </script>
</head>

<body>
  <div id="all">
    <div class="welcome">
      <h1 class="title" align="center">Student Page</h1>
      <h2 align="center">Class Schedule</h2>
    </div>
    <table id="enrolled" align="center">
      <tr id="titleRow">
        <th>Course</th>
        <th>Course Number</th>
        <th>Room</th>
      </tr>
    </table>
    <div id="registerBox">
      <button onclick="addCourse()">Register</button>
      <button onclick="clearData()">Clear Data</button>
      <input type="text" id="courseName" placeholder=" Course Name">
      <input type="text" id="courseNumber" placeholder="Course Number">
      <input type="text" id="room" placeholder="Room">
    </div>
  </div>
</body>

</html>

Answer 1

在这段代码中，

var row = enrolled.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

for (i = 0; i <= courseArray.length; i++) {
  cell1.innerHTML = courseArray[i].name;
  cell2.innerHTML = courseArray[i].number;
  cell3.innerHTML = courseArray[i].room;
}

您正在使用3 row创建1 cell并继续使用每个循环替换相同的 cell数据。要显示您拥有的每个row数据，您必须在循环中创建新 row和cells，就像这样

for (i = 0; i < courseArray.length; i++) {
  var row = enrolled.insertRow(1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  cell1.innerHTML = courseArray[i].name;
  cell2.innerHTML = courseArray[i].number;
  cell3.innerHTML = courseArray[i].room;
}

请注意，循环条件已被修改。

Answer 2

1）从本地存储获得的是JSON结构的字符串表示形式。您必须解析它以获取一组普通对象。所以修改你的函数getCourseArray（）如下：

function getCourseArray() {
  return JSON.parse(localStorage.getItem("course"));
}

2）你的函数createSchedule（）包含错误的代码：

var table = getElementById("enrolled"); // BAD
var table = document.getElementById("enrolled"); // GOOD

3）它也不完整。您必须将创建的元素附加到表中，如下所示：

function createSchedule(course) {
  var table = document.getElementById("enrolled");
  var row = document.createElement("tr");
  var cell1 = document.createElement("td");
  var cell2 = document.createElement("td");
  var cell3 = document.createElement("td");
  cell1.innerHTML = course.name;
  cell2.innerHTML = course.number;
  cell3.innerHTML = course.room;
  row.appendChild(cell1);
  row.appendChild(cell2);
  row.appendChild(cell3);
  table.appendChild(row);
}

动态创建HTML表并使用localstorage中的数据填充

2 个答案: