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

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 属性。

希望对您有所帮助。

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

Store On Change and Later Retrieve Session Form Data

php

jquery

storage