时间戳

首页 > 解决方案 > 存储更改并稍后检索会话表单数据

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

问题描述

在不讨论我需要这样做的原因（它可以防止重写一堆其他预先存在的代码）的情况下，我需要在表单发生更改时存储表单数据，以便用户可以转到另一个可能需要的选项卡某些功能的页面刷新。当然，这会清除表单，因为表单位于同一页面上。我的解决方案是在任何表单更改时序列化表单（使用 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>

标签： phpjquerystorage

解决方案

很多方法可以做到这一点。这是一个使用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属性。

希望这可以帮助。

推荐阅读