ページリロードにページデータを保持する

Question

HTMLテーブルがあり、jQueryを使用して行を追加および削除しています。たとえば10行を追加してからページをリロードすると、追加されたすべてのデータが消去されます。

ページを再読み込みした後にそのデータを保持するにはどうすればよいですか？

これは私がこれまで持っているものです：

あなたはsomehwereこれらの新しい作成された行を格納し、あなたのサイトがロードされた後、あなたのDOMにそれらをロードする（または負荷ながらする必要が

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

）。

JavaScriptを使用して追加する行は一時的なものであり、DOMを操作するだけなので、ファイルには保存されません。ちょっと正確にするには：変更は現在あなたが使用しているこのブラウザでのみ適用されます。

これを永続化すると、すべてのユーザーに表示されるように、上記のように作成された行を保存する必要があります。

たとえば、これらの行を.txtファイルまたはデータベースに格納することができます。これは、その行を使用して行うことにある程度依存しています。それらの値をシリアル化してシリアル化してからシリアル化し、ハードコードされたテーブルに追加することができます。

Answer 3

あなたはデータを保存する必要があります。たとえば、dataBase localStorageやsessionStorageなどです。 問題では、localStorageで十分です。

localStorageにvalue.ifがあると判断する必要がある場合は、javascriptを使用してテーブルに値を入力するだけです（tabaleを作成して$（ '.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) 
} 

なぜそれを削除しましたか？