将表数据保存到HTML5 LocalStorage

时间:2015-01-29 03:42:32

标签: javascript jquery html5 local-storage

我创建了一个JSFiddle Here

我要做的是从以下代码中保存表格数据:

  $('#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('');
 })

我想保存<tr>数据,但是我很难找到从哪里开始将其解析成可保存的格式。

2 个答案:

答案 0 :(得分:1)

也许你可以把它保存为JSON字符串

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

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

然后:

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

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

答案 1 :(得分:1)

我写了一些代码来帮助你。

首先为要存储在网格中的记录创建一个类

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

创建一个函数,它将循环遍历所有tr和tds以填充该数组,最后将JSON数据保存在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