如何在页面重新加载后保留添加行及其值

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

这里你最好的选择是存储json数据的cookie。

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阅读完整的文档（） 这里

Answer 2

你可以使用window.location.reload（true）和$（document）.ready函数来获取当前的no。 rows.Define行计数和列计数变量作为全局变量。

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