如何留住甚至頁面重載

Question

好日子後添加行和它的價值，

我有一個表，你可以動態地添加/刪除行，每行可以從列表中的工作增加一個選擇項完美的時刻，我想補充的是，即使我頁面重新加載我的瀏覽器，它仍然保留添加的行和它的值？

我在我的研究中看到，您可以通過使用cookies/localStorage來達到目的，但是如果我在其上存儲了很多項目就可以了？

繼承人我的表是這樣的： 我的JS：

function addRow(){ 
var rowCount = document.getElementById('tblItemList').rows.length - 1 ; 
var rowArrayId = rowCount ; 
var toBeAdded = document.getElementById('toBeAdded').value; 

if (toBeAdded=='') 
    { toBeAdded = 2; } 
else if(toBeAdded>10) 
{ 
    toBeAdded = 10; 
} 

    for (var i = 0; i < toBeAdded; i++) { 
    var rowToInsert = ''; 
    rowToInsert = "<tr><td><input id='itemName"+rowArrayId+"' required name='product["+rowArrayId+"][name]' class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />"+ 
    "<input type='hidden' class='rowId' value='"+rowArrayId+"'>"+ 
    "<input type='hidden' name='product[" + rowArrayId + "][itemId]' id='itemId'></td>"; 
    $("#tblItemList tbody").append(
     rowToInsert+ 
     "<td><textarea readonly name='product["+rowArrayId+"][description]' class='form-control description' rows='1' ></textarea></td>"+ 
     "<td><input type='number' min='1' max='9999' name='product["+rowArrayId+"][quantity]' class='qty form-control' required />"+ 
     "<input id='poItemId' type='hidden' name='product[" + rowArrayId + "][poContentId]'></td>"+ 
     "<td><input type='number' min='1' step='any' max='9999' name='product["+rowArrayId+"][price]' class='price form-control' required /></td>"+ 
     "<td class='subtotal'><center><h3>0.00</h3></center></td>"+ 
     "<input type='hidden' name='product["+rowArrayId+"][delete]' class='hidden-deleted-id'>"+ 
     "<td class='actions'><a href='#' class='btnRemoveRow btn btn-danger'>x</a></td>"+ 
     "</tr>"); 

var rowId = "#itemName"+rowArrayId; 
$(rowId).select2({ 
    placeholder: 'Select a product', 
    formatResult: productFormatResult, 
    formatSelection: productFormatSelection, 
    dropdownClass: 'bigdrop', 
    escapeMarkup: function(m) { return m; }, 
    formatNoMatches: function(term) { 

     $('.select2-input').on('keyup', function(e) { 
     if(e.keyCode === 13) 
      { 
      $("#modalAdd").modal();   
      $(".select2-input").unbind("keyup"); 
      } 
     }); 

    return "<li class='select2-no-results'>"+"No results found.<button class='btn btn-success pull-right btn-xs' onClick='modal()'>Add New Item</button></li>"; 
    }, 
    minimumInputLength:1, 
    ajax: { 
     url: '/api/productSearch', 
     dataType: 'json', 
     data: function(term, page) { 
      return { 
       q: term 
      }; 
     }, 
     results: function(data, page) { 
      return {results:data}; 
     } 
    } 

}); 

rowArrayId = rowArrayId + 1; 

}; 

function productFormatResult(product) { 
    var html = "<table><tr>"; 
    html += "<td>"; 
    html += product.itemName ; 
    html += "</td></tr></table>"; 
    return html; 
} 

function productFormatSelection(product) { 
    var selected = "<input type='hidden' name='itemId' value='"+product.id+"'/>"; 
    return selected + product.itemName; 
} 
    $(".qty, .price").bind("keyup change", calculate); 
}; 

這裏的問題是，每當林刷新頁面，我加入也將丟失，以及那些我已經行項目補充，有什麼建議嗎？非常感謝您的時間！祝你今天愉快！

Answer 1

這裏最好的選擇是cookies來存儲json數據。

Your best bet here would be to cookies to store json data. 

function storeRowData() { 
    var data = []; 
    $('.TABLE_NAME tr').each(function() { 
     var $this = $(this), 
      pname = $this.find(PRODUCT_NAME_INPUT).val(), 
      desc = $this.find(PRODCUT_DESC_INPUT).val(), 
      quant = $this.find(PRODUCT_QUANTITY_INPUT).val(), 
      price = $this.find(PRODUCT_PRICE_INPUT).val(); 
     var temp = { productName: pname, description: desc, quantity: quant, price: price }; 
     data.push(temp); 
    }); 

    $.cookie('Table_Rows', JSON.stringify(data), {OPTIONS}); 
} 

現在無論何時添加或刪除行，您都可以調用它。當你重新加載頁面時，只需讀取cookie並將字符串解析爲JSON並遍歷併爲每行調用addrow。

注：請務必在jquery.cookie（）讀取完整的文檔Here我總是專注使用可能可以使用jQuery.cookie（）

Answer 2

您可以使用window.location.reload（true）和$（document）.ready函數，您可以獲取當前編號。行數。定義行數&列數變量作爲全局變量。

location.reload(true); 
var rowCount,rowArrayId,toBeAdded ; 
$(document).ready(function() { 
rowCount= document.getElementById('tblItemList').rows.length - 1 ; 
rowArrayId = rowCount ; 
toBeAdded = document.getElementById('toBeAdded').value; 
});