javascript - 如何在本地存储中保存传输的行

Question

我想要的是

$(function() {
  function moveRow(row, targetTable, newLinkText){
    $(row)
    .appendTo(targetTable)
    .find("A")
    .text(newLinkText);
  }

  $("#FIRST A").live("click", function(){
    moveRow($(this).parents("tr"), $("#SECOND"), "Add");
  });

  $("#SECOND A").live("click", function(){
    moveRow($(this).parents("tr"), $("#FIRST"), "Delete");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<TABLE ID="FIRST"></TABLE>

<hr />

<TABLE ID="SECOND"> 
  <TR>
    <TD>1</TD>
    <TD>First Value</TD>
    <TD><A HREF="#">Add</A></TD>
  </TR>
  <TR>
    <TD>2</TD>
    <TD>Second Value</TD>
    <TD><A HREF="#">Add</A></TD>
  </TR>
  <TR>
    <TD>...</TD>
    <TD>...</TD>
    <TD><A HREF="#">Add</A></TD>
  </TR>
</TABLE>

http://jsfiddle.net/UxRVa/1/

示例中显示的内容。如果您从第一个表导入行，我希望在刷新页面后保存它。我花了几个小时尝试了多种不同的方法，但每种方法都失败了。

Answer 1

使用以下代码来存储和读取localStorage:

$('#FIRST A,#SECOND A').live('click', function() {
   localStorage.setItem('FIRST',$('#FIRST').html());
   localStorage.setItem('SECOND',$('#SECOND').html());
});

var first = localStorage.getItem('FIRST');
var second = localStorage.getItem('SECOND');
!first || $('#FIRST').html(first);
!second || $('#SECOND').html(second);

DEMO

更新

比上述方法更好的方法是创建一个 saveTables 函数，每次在进行任何更改后都应该调用该函数:

$(function() {
   function moveRow(row, targetTable, newLinkText){
       $(row)
           .appendTo(targetTable)
           .find("A")
               .text(newLinkText);
     saveTables();
   }
   function saveTables() {
     localStorage.setItem('FIRST',$('#FIRST').html());
     localStorage.setItem('SECOND',$('#SECOND').html());     
   }
   
   $("#FIRST A").live("click", function(){
       moveRow($(this).parents("tr"), $("#SECOND"), "Add");
   });

   $("#SECOND A").live("click", function(){
       moveRow($(this).parents("tr"), $("#FIRST"), "Delete");
   });
  
   var first = localStorage.getItem('FIRST');
   var second = localStorage.getItem('SECOND');
   !first || $('#FIRST').html(first);
   !second || $('#SECOND').html(second);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<TABLE ID="FIRST">
</TABLE>
    
<hr />

<TABLE ID="SECOND"> 
<TR>
<TD>1</TD>
<TD>First Value</TD>
<TD><A HREF="#">Add</A></TD>
</TR>
<TR>
<TD>2</TD>
<TD>Second Value</TD>
<TD><A HREF="#">Add</A></TD>
</TR>
<TR>
<TD>...</TD>
<TD>...</TD>
<TD><A HREF="#">Add</A></TD>
</TR>
</TABLE>