使用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>

有几个这样的段,例如#s1 ..#s7.这是我的任务我想让用户保存窗体的状态.因此,一旦用户填写了整个表单,选择某些细分的平均默认值,然后为其他段输入自定义值,用户可以点击一个按钮,并保存整个状态以供以后解冻.我想,如果我可以将状态保存在可以序列化的对象中,我可以将其保存在数据库表或其他持久性存储中.

用户可以稍后回来,重新构建整个上一个会话.

我该如何做？有一个getAttributes插件http://plugins.jquery.com/project/getAttributes,还有jQuery serialize方法,但是我不能为我的生活开始.请推动我正确的方向.

解决方法

这里有几个功能来帮助这个过程. 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,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"));