Question

我有一个包含超过100个字段的大表单。还有一些动态生成的字段，用户可以在其中添加多个记录，因此涉及到相当多的JavaScript / Jquery。

我应该考虑采用哪种方法来保存这样的表格，并重新填充所有这些字段。

1）序列化对象。最后，我点击了＆＃34; Save＆＃34;然后我将这个大表单保存在序列化对象中。按钮。但是，考虑到重新生成所有这些动态生成的字段/表所涉及的编码量，我想知道第二种方法。

2）将所有HTML存储在表单标记中。只需使用AJAX调用，将所有内容（包括动态结构）传递到DB中。看起来使用JQuery访问对象会更容易，并在＆＃34; Resume＆＃34;上重新填充表单。但是，我还没有测试过。

关于其他人如何解决这个问题的任何见解/提示都将非常感激。

Answer 1

我建议您查看BackboneJS，因为它可以让您更轻松地存储和移动数据。

他们是一本关于骨干的介绍性书籍，它将教你一两天内需要了解的所有基础知识。

Answer 2

您可以使用localStorage或sessionStorage存储响应。这是一个存储名称和值数组的简单示例。在保存时，它会将所有内容推送到可用存储，在从本地存储中获取数组时，将输入值设置为已保存的数据。

不需要ajax请求。

由于“iframe中没有同源政策”
，
无法在堆栈上运行

$(function() {
  var $form = $('#form'),
    $save = $('#save'),
    $restore = $('#restore'),
    results = [],
    storage = window.localStorage || window.sessionStorage;

  $form.on('change', 'input[type=text]', function(e) {
    results = $form.serializeArray();
    console.log( 'change', results );
  });

  $save.on('click', function(e) {
    storage.setItem('form-inputs', JSON.stringify(results));
    $form.reset();
  });

  $restore.on('click', function(e) {
    var inputs = JSON.parse( storage.getItem('form-inputs'))
    inputs.forEach(function(input) {
      $( '[name=' + input.name + ']' ).val( input.value );
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script>
<form id="form">
  <input type="text" name="first_name" id="first_name" value="foo" />
  <input type="text" name="last_name" id="last_name" value="bar" />
  <input type="button" id="save" value="save" />
  <input type="button" id="restore" value="restore" />
</form>

保存/恢复HTML申请表的进度

2 个答案: