刷新页面后维护 JavaScript 附加项

Question

我希望我附加的 <tr> 元素在刷新页面后保持不变。

例如，当我注册用户时，数据会附加到表格行中。我想添加新用户，但我希望之前添加的用户也保留在表格中。

$("#tesdiq").click(function () 
    $(".regForm").hide();
    $(".myTable").show();

    var ad = $("#ad").val();
    var soyad = $("#soyad").val();
    var email = $("#email").val();
    var sheher = $("#sheher").val();

    var infolar = ("<tr><td>" + ad + "</td>" + "<td>" + soyad + "</td>" + "<td>" + email + "</td>" + "<td>" + sheher + "<td>" + "<input type='checkbox' name='sil'></td></tr>");

    $(".myTable table tbody").append(infolar);


localStorage.setItem("ad", ad);
localStorage.setItem("soyad",soyad);
localStorage.setItem("email",email);
localStorage.setItem("sheher",sheher);

我试过了，但它只能工作一次：

var myUser = localStorage.getItem("ad");

if (myUser) {

  var yeni = ("<tr><td>" + localStorage.getItem("ad") + "</td>" +
    "<td>" + localStorage.getItem("soyad") + "</td>" +
    "<td>" + localStorage.getItem("email") + "</td>" +
    "<td>" + localStorage.getItem("sheher") +
    "<td>" + "<input type='checkbox' name='sil'></td></tr>");
    
  $(".myTable table tbody").append(yeni);
  
}

Answer 1

$("#tesdiq").click(function () 
    $(".regForm").hide();
    $(".myTable").show();

    var ad = localStorage.getItem("ad") || $("#ad").val();
    var soyad = localStorage.getItem("soyad") || $("#soyad").val();
    var email = localStorage.getItem("email") || $("#email").val();
    var sheher = localStorage.getItem("sheher") ||  $("#sheher").val();

    var infolar = ("<tr><td>" + ad + "</td>" + "<td>" + soyad + "</td>" + "<td>" + email + "</td>" + "<td>" + sheher + "<td>" + "<input type='checkbox' name='sil'></td></tr>");

    $(".myTable table tbody").append(infolar);


localStorage.setItem("ad", ad);
localStorage.setItem("soyad",soyad);
localStorage.setItem("email",email);
localStorage.setItem("sheher",sheher);

Answer 2

刷新后你不能在页面中保持不变，因为它正在处理点击事件

$("#tesdiq").click(function () {}

你应该在 onload 事件上写这个，然后刷新后它就会在那里

Answer 3

我建议使用JSON 将表单数据保存为数组中的对象。

您可以序列化表单数据、创建对象并将其推送到数组中。然后使用JSON.stringify 将生成的对象数组转换为 JSON 字符串并将其存储在本地存储中。当您从本地存储中检索数据时，您可以使用JSON.parse 将 JSON 转换回对象数组。然后，您可以将这些对象中的数据添加到 HTML 表中。

看起来您使用的是 jQuery，所以我在示例中使用了它：

//localStorage.clear();

let $form = $('#regForm');
let $table = $('#userTable');

// get and parse local storage JSON
let regData = localStorage.hasOwnProperty('regData')
  ? JSON.parse(localStorage.getItem('regData'))
  : [];

// function to add row to table
function addTableRow(row) {
  let $thisRow = $('<tr>');
  $.each(row, function() {
    $('<td>', {
      'text': this
    }).appendTo($thisRow);
  });
  $thisRow.appendTo($table);
}

// add rows from local storage to table
$.each(regData, function() {
  addTableRow(this);
});

// add row from form to local storage and table
$('#addRow').on('click', function() {
  let formData = {};
  $.each($form.serializeArray(), function() {
    formData[this.name] = this.value;
  });
  regData.push(formData);
  localStorage.setItem('regData', JSON.stringify(regData));
  addTableRow(formData);
  $form[0].reset();
});

#userTable {
  margin: 0 0 2em;
  width: 100%;
  text-align: left;
}

form label,
form label span {
  display: block;
}

#addRow {
  margin: 1em 0 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="userTable">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Phone Number</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<form id="regForm">
  <label>
    <span>First Name</span>
    <input type="text" name="firstName" value="">
  </label>
  <label>
    <span>Last Name</span>
    <input type="text" name="lastName" value="">
  </label>
  <label>
    <span>Email</span>
    <input type="text" name="email" value="">
  </label>
  <label>
    <span>Phone Number</span>
    <input type="text" name="phone" value="">
  </label>
  <button type="button" id="addRow">Add Row</button>
</form>

View Demo on JSFiddle

另见Using HTML5 Local Storage as a Client-Side Database。