使用jQuery存储复杂表单的状态

我有一个相当复杂的表单，其中有许多由用户填写的“步骤”。某些步骤（将其视为表单段）具有默认选项，但单击“输入自定义值”时，会显示一组隐藏的字段，用户可以在其中输入信息。这里有一个例子

<div id="#s1_normal">
<input type="radio" name="mode" value="a"> Mode A
<input type="radio" name="mode" value="b"> Mode B
Choose one of the above for applying average coefficient 
values of "a" or "b" to 100% of your product or
<a href="#" onclick="toggleCustom('s1');">enter custom values</a>
</div>

<div id="#s1_custom">
%a: <input type="text" name="perc_a"> coeff. a <input type="text" name="coeff_a">
%b: <input type="text" name="perc_b"> coeff. b <input type="text" name="coeff_b">
Enter custom values above or 
<a href="#" onclick="toggleCustom('s1');">choose average values</a>

模式A
模式B
选择上述其中一项应用平均系数
“a”或“b”值至产品的100%，或
%a:科夫。A.
%b:科夫。B
在或以上输入自定义值

有几个这样的部分，例如#s1#s7。这是我的任务。我想使用户能够保存表单的状态。因此，一旦用户填写了整个表单，为某些部分选择了平均默认值，并为其他部分输入了自定义值，用户就可以单击按钮并保存整个状态，以便稍后解冻。我在想，如果我可以将状态保存在一个可以序列化的对象中，我可以将它保存在db表或其他一些持久性存储中

用户可以稍后返回并重新构建整个上一个会话

---

我该怎么做？有getAttributes插件，有jQuery序列化方法，但我不能一辈子开始。请把我推到正确的方向。

我想你在找，它序列化了

表单数据。要做到这一点，您的
输入
元素需要位于
表单标记
内，而且所有元素都必须具有
名称
属性

var form1data = $('#form1').serialize();

alert(form1data);

您可能只想将非默认数据放入json，然后通过post请求将其发送到要保存的服务器

因此，一旦用户返回页面，您会自动查看他们是否保存了某些内容，您可以询问他们是否要使用这些内容，或者根据保存的数据填充表单

保存默认值是对带宽的浪费，因为无论如何，您都不会更改加载表单时的默认值

更新：

要将其保存为JSON，我认为将其构建为一个长字符串是很容易的，因为格式很简单，所以您只需将所有内容作为单个字符串发送即可

您可能还希望保存他们所处的阶段，或者在他们进入每个阶段时自动保存，这可能是一个更好的选择，如果他们的计算机崩溃，他们不必重新开始，但您可能希望通过复选框启用该选项，以启用自动保存。
这里有几个函数可以帮助完成此过程
formToString
将表单序列化为字符串，而
stringToForm
则执行相反的操作：

function formToString(filledForm) {
    formObject = new Object
    filledForm.find("input, select, textarea").each(function() {
        if (this.id) {
            elem = $(this);
            if (elem.attr("type") == 'checkbox' || elem.attr("type") == 'radio') {
                formObject[this.id] = elem.attr("checked");
            } else {
                formObject[this.id] = elem.val();
            }
        }
    });
    formString = JSON.stringify(formObject);
    return formString;
}
function stringToForm(formString, unfilledForm) {
    formObject = JSON.parse(formString);
    unfilledForm.find("input, select, textarea").each(function() {
        if (this.id) {
            id = this.id;
            elem = $(this); 
            if (elem.attr("type") == "checkbox" || elem.attr("type") == "radio" ) {
                elem.attr("checked", formObject[id]);
            } else {
                elem.val(formObject[id]);
            }
        }
    });
}

用法：

// Convert form to string
var formString = formToString($("#myForm"));
// Save string somewhere, e.g. localStorage
// ...

// Restore form from string
stringToForm(formString, $("#myForm"));

首先，我会使用

该插件实际上会在您键入内容等时自动保存内容。因此，当这些内容返回时，它已经再次填写，您不需要服务器端来完成

在那之后，我将创建更多的jQuery以在dumbFormState插件之后加载，然后显示/隐藏填写的区域。如果你在别人填写表格之前打电话给他们也没问题，因为它是空白的，你的逻辑不应该显示/隐藏空白的内容。
谢谢你的建议。正如我在问题中提到的，我知道serialize方法，但是，对我来说，它似乎只是解决方案的一部分。要恢复表单，我必须读取存储的序列化数据，然后将表单重建回状态，包括其所有自定义条目。。也就是说，如果取消隐藏某个隐藏段以输入自定义值，我希望将其恢复。我该怎么做？@punkish：我不知道jQuery核心中有一些
反序列化（）
方法。因此，您要么编写自己的自定义解析器，要么寻找一个插件。@punkish这里是my-serialize（）和缺少的unserialize（）的替代品，它使用对象而不是字符串；我想要一个轻量级插件，它只处理表单状态，而不处理字符串表示或存储方法。它以一种合理的方式处理收音机、复选框等。这非常有用！对于那些不知道如何调用函数的人来说，我是这样使用它的：
sessionStorage.setItem（“formdata”，formToString（jQuery（“form”））
，然后将其命名为：
var storedform=sessionStorage.getItem（“formdata”）；stringToForm（storedform，jQuery（#form））
这个
$j（this）
表达式是打字错误吗？我在使用这个脚本时遇到JavaScript错误，并假设它应该是
$（this）
，对吗？这不是打字错误，但我从答案中删除了它，因为只有
$
是访问jquery的默认方式。有关更多信息，请参见您忘记的
textarea
应使用formObject[this.id]=elem.prop（“选中”）；让它工作。（jQuery 2.2.0）