将 table 数据保存到 HTML5 LocalStorage

Question

我创建了一个 JSFiddle Here

我想做的是从以下代码中保存 table 数据：

  $('#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> 数据，但我找不到从哪里开始将其解析为可保存的格式。

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

Answer 2

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

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

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

将 table 数据保存到 HTML5 LocalStorage

Saving table data to HTML5 LocalStorage

html

javascript

jquery

local-storage