jquery - jQueryとPHPを使用してフォームの詳細を自動保存する

Question

jQueryを使用して動的行を作成するために使用している.phpページがあります。このライブラリ「sisyphus.js」と「sisyphus.min.js」と「jquery-1.7.min.js」も使用しています。フォームの動的な行を保持できません。

ここでは、この形式で動的行を追加しています。タイマーを5秒に設定します。10秒以上経過すると、ページを更新すると、追加したすべての動的行が失われます。

このような：

<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script src="sisyphus.js" language="javascript"></script>

<script language="javascript" >
    jQuery('#form1').sisyphus();
    jQuery('form').sisyphus({timeout: 5});
</script>

<script type="text/javascript">
    $(document).ready(function(){       

        $('.del').live('click',function(){
            $(this).parent().parent().remove();
        });

        $('.add').live('click',function(){
            $(this).val('Delete');
            $(this).attr('class','del');
            var appendTxt = "<tr><td><select  name='ptype[]' ><option value='1' >ONE</option><option value='2' >TWO</option></select></td><td><select name='product[]' ><option value='3' >ONE333</option><option value='4' >TWO444</option></select></td><td><input type='text' name='dsc[]' /></td><td><input type='text' name='qty[]' /></td></td><td><input type='button' class='add' value='Add More' /></td></tr>";
            $("tr:last").after(appendTxt);          
        });        
    });
</script>

<form name='form1' id='form1' action='' >
<table id='options-table'>
  <tr>
    <td>Type</td>
    <td>Product</td>
    <td>Desc</td>
    <td>Qty</td>                        
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><select  name='ptype[]' >
        <option value='1' >ONE</option>
        <option value='2' >TWO</option>
      </select></td>
    <td><select name='product[]' >
        <option value='3' >ONE333</option>
        <option value='4' >TWO444</option>
      </select></td>
    <td><input type='text'   name='dsc[]' /></td>
    <td><input type='text'   name='qty[]' /></td>          
    <td><input type='button' class='add' value='Add More' /></td>
  </tr>  
  </tr>
</table>
</form>