Saving table data to HTML5 LocalStorage

Question

I've created a JSFiddle Here

What I'm trying to do is save table data from the following code:

  $('#save').click(function () {

  $("#dataTable").find('tbody')
      .append($('<tr>')
      .append($('<td>')
      .text($('#fname').val()))
      .append($('<td>')
      .text($('#lName').val()))
      .append($('<td>')
      .text($('#mId').val()))
      );       
  $('#fname').val('');
  $('#lName').val('');
  $('#mId').val('');
 })

I would like to save the <tr> data, but I'm having trouble finding where to start on parsing that into a savable format.

Solution 1

I have written little bit code to help you.

First create a class for the record which you want to store in grid

function MemberInfo(fName,lName,memberId){
this.FirstName=fname;
this.LastName=lName;
this.MemberId=memberId;    
}

the create a function which will loop through all the tr and tds to populate that array, and finally save the JSON data in localStorage

var arr=[];    
    $("#dataTable").find('tbody tr').each(function(index,item){

        var fName=$(item).find('td').eq(0).text();
        var lName=$(item).find('td').eq(1).text();
        var memberId=$(item).find('td').eq(2).text();
        arr.push(new MemberInfo(fName,lName,memberId))
    });


  localStorage.setItem("memberData",arr);

Fiddle

Solution 2

Maybe you can save it as a JSON string

var data = {
    name : $('#fname').val(),
    lastname : $('#lName').val(),
    memberId : $('#mId').val()
};

localStorage.setItem('member-data', JSON.stringify(data))

then later:

var data = JSON.parse(localStorage.getItem('member-data') || {})

$('#fname').val(data.name);
$('#lName').val(data.lastName);
$('#mId').val(data.memberId);