Keeping page data on page reload

Question

I have a HTML table and I am adding and removing rows using jQuery. When I add for example 10 rows and then reload the page, all added data is erased.

How can I keep that data after page is reloaded?

This is what I have so far:

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>

Try using [Window.localStorage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) — Ryad Boubaker, Feb 13 '17 at 08:27
Should these (changed) values be visible for everyone, or just for you? If you add 10 rows, and someone else opens the page, should these 10 rows be there as well? — DasSaffe, Feb 13 '17 at 08:44
Yes rows must be visible for every user until anyone removes thees. — Sooraj Abbasi, Feb 13 '17 at 08:47

score 0 · Answer 1 · answered Feb 13 '17 at 08:24

You need to store these new created rows somehwere and load them into your dom, after your site is loaded (or while loads).

The rows you add via JavaScript are only temporarily and thus, not saved in your file, since you just manipulate the dom. To be a bit more precise: The changes only apply for you, in this very browser you are using right now.

To make it permanent (and thus visible for everyone as well), you need to save the created rows, as mentioned above.

For instance, you could store those rows in a .txt-file or a database, kinda relies on what you are going to do with it. You might serialize those values and load them after unserializing and append it to your hard-coded table.

That isn't doable with pure JavaScript, since it is not allowed to access files (securty-reasons). You need to pair with PHP or any language which can access those. Same goes for database-inputs. also, like @ryad suggested, you can try the `window.localStorage`-method. — DasSaffe, Feb 13 '17 at 08:38

score 0 · Accepted Answer · answered Feb 13 '17 at 09:03

Set the data to localstorage and retrieve later.

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>

Keeping page data on page reload

2 Answers2