javascript - 在页面重新加载时保留页面数据

Question

我有一个 HTML 表格，我正在使用 jQuery 添加和删除行。例如，当我添加 10 行然后重新加载页面时，所有添加的数据都将被删除。

如何在页面重新加载后保留该数据？

这是我目前所拥有的:

function AddRow() {
  $('.print-table').append("<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>")
}
$('.print-table').on('click', '.removebtn', function() {
  $(this).parent().parent().remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table print-table">
  <thead>
    <tr class="danger">
      <th width="30">S#</th>
      <th width="100">VOUCHER#</th>
      <th width="80">ID</th>
      <th>FULL NAME OF STUDENT</th>
      <th width="80">PAYABLE</th>
      <th width="80">PAID</th>
      <th width="100">PAID ON</th>
      <th width="110">CLOSE-BAL</th>
      <th width="80">ACTION</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>999</td>
      <td>
        <input type="text" name="id" disabled="disabled">
      </td>
      <td>
        <input type="text" name="id" disabled="disabled">
      </td>
      <td>
        <input type="text" name="id" autofocus>
      </td>
      <td>
        <input type="text" name="id" disabled="disabled">
      </td>
      <td>
        <input type="text" name="id">
      </td>
      <td>
        <input type="text" name="id" onfocusout="AddRow()">
      </td>
      <td>00</td>
      <td>
        <button class="btn btn-primary btn-xs removebtn">Delete</button>
      </td>
    </tr>
  </tbody>
</table>
<button class="btn btn-primary xs" onclick="AddRow()">Add Row</button>

Answer 1

将数据设置到本地存储并稍后检索。

localstorage.setItem("data", "<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>");

---

    <script type="text/javascript">
   var olddata = localstorage.getItem("data");

    $('.print-table').append(data);

        function AddRow() {
            $('.print-table').append("<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>")

    localstorage.setItem("data", localstorage.getItem("data")+"<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>");

        }
        $('.print-table').on('click','.removebtn', function() {
             $(this).parent().parent().remove();
        });
    </script>