How to retain add rows and its value even after page reload

Question

Good day,

I have a table where you can dynamically add/remove rows, on each row you can add an select an item from the list its working perfectly at the moment, what I want to add is for it to retain the added rows and its values even if I page reload my browser?

I have seen on my research that you can attain it by using cookies/localStorage,but would be okay if I store many items on it?

heres my table looks like: my 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);
};

the problem here is whenever Im refreshing the page the Items that I added will also be lost as well as those rows that I've added, any suggestions please? Thanks you very much for your time! Have a nice Day!

Answer 1

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

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

Now whenever you add or remove rows, you can call this. And when you reload page just read the cookie and parse the string back to JSON and traverse and call addrow for each row.

NOTE: Be sure to read full documentation on jquery.cookie() Here

Answer 2

You can use window.location.reload(true) and $( document ).ready function where you can get current no. of rows.Define row count & column count variable as a global variable.

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