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

How to save in localstorage transfered rows

本文关键字：传输 存储 何保 存在      更新时间：2023-09-26

我想要的是 

$(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/

示例中显示的内容。如果您从第一个表中导入行，我希望在刷新页面后保存它。我试图用大量不同的方式做几个小时，但每种方式都让我失望了。

使用以下代码存储和读取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);

演示

更新

比上面更好的方法是创建一个 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>

相关文章：