保持页面数据页面刷新

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并稍后检索。

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> 

Answer 2

您需要somehwere存储这些新创建的行并将它们加载到你的DOM，您的网站加载后（或同时负载）。

通过JavaScript添加的行只是暂时的，因此不会保存在您的文件中，因为您只是操纵dom。要更精确一点：这些更改只适用于您，在您现在使用的浏览器中。

为了使其成为永久的（并且因此对所有人都可见），您需要保存创建的行，如上所述。

例如，您可以将这些行存储在文件或数据库中，这取决于您要如何处理它。您可以序列化这些值并在反序列化之后加载它们并将其附加到硬编码表中。

Answer 3

您需要存储以存储您的数据。如数据库localStorage和sessionStorage。 在你的问题中，localStorage就足够了。你需要判断localStorage是否有值。如果你只是用javascript来填充表（使用$（'。print-table'）.html（））来填充表。

当您添加和删除行时，您需要存储数据;

如：

存储中的数据

var data;//your data 
localStorage.data = data;//store the data; 

获取数据;

var odlData; 
if(localStorage.data){ 
    var data = localStorage.data; 
    //code (use jq to fill html with created table with data) 
} 

为什么删除它???