保持頁面數據頁面刷新

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) 
} 

爲什麼刪除它???