Question

无需深入说明我需要执行此操作的原因（它防止重写一堆其他预先存在的代码），每当对表单进行更改时，我都需要存储表单数据，以便用户可以转到另一个选项卡可能需要刷新某些功能的页面。当然，这会清除表格，因为表格在同一页上。我的解决方案是在任何表单更改时序列化表单（使用jQuery）。我可以将序列化的数据存储在PHP会话变量中。当用户重新选择表单选项卡时，我可以还原表单数据。我只是不知道如何还原序列化的表格数据。或者，也许有一种更优雅的方法。

我正在使用它来序列化表单数据：

<script type="text/javascript">
    var FormChanged = false;
    $('#TheForm').on('keyup change paste', 'input, select, textarea', function()
    {
        var Form = $('#TheForm').serialize();
        FormChanged = true;
    });
</script>

Answer 1

很多方法可以做到这一点。这是一个使用localStorage的示例。

工作示例：https://jsfiddle.net/Twisty/ofrcza1g/

HTML

<div>
  <form id="myForm">
    <label for="myName">Name</label> <input type="text" id="myName" /><br />
    <label for="myTitle">Title</label> <input type="text" id="myTitle" /><br />
    <label for="myGender">Gender</label> <select id="myGender">
    <option></option>
    <option>Male</option>
    <option>Female</option>
    <option>Non-Binary</option>
    </select>
  </form>
</div>
<button id="myStatus">Check Status</button>

JavaScript

$(function() {
  var dataSaved = false;

  function saveData(i, s) {
    // Input: Index, String
    // Output: Boolean
    localStorage.setItem(i, s);
    return true;
  }

  function loadData(i) {
    // Input: Index
    // Output: Parse Variable Data
    var d = localStorage.getItem(i);
    return JSON.parse(d);
  }

  function gatherData(f) {
    var d = {};
    f.find("input, select, textarea").each(function(i, el) {
      var k = $(el).attr("id");
      var v = $(el).val();
      d[k] = v;
    });
    return d;
  }

  $('#myForm').on('change blur', 'input, select, textarea', function(e) {
    var fd = JSON.stringify(gatherData($("#myForm")));
    console.log("Saving", fd);
    dataSaved = saveData("fd", fd);
  });
  $("#myForm").ready(function() {
    var fd = loadData("fd");
    console.log(fd);
    $.each(fd, function(k, v) {
      $("#" + k).val(v);
    });
  });
  $("#myStatus").click(function() {
    console.log(loadData("fd"));
  });
});

您也可以使用.serialize()。我刚刚发现它依赖于name属性。

希望这会有所帮助。

存储更改并稍后检索会话表单数据

1 个答案: