更新

我推出了我的代码here。检查//结束cookie插件后的javascript代码因为我确信jQuery插件正常工作。

Answer 1

是的，您可以使用serialize()序列化表单值。语法：

$("#your_form").serialize()

将返回您可以处理的字符串，或保存到cookie（您可以使用jquery cookie插件）。

修改：上面的代码将序列化，但很难检索您最好使用serializeArray()，它返回一组名称值对（如：[{name: "age", value: "23"}, {name: "sex", value: "male"}]）。您可以查看docs以获得更好的解释。

有了这个，我们可以构建一个“form to string”函数和一个“string to form”函数：

function form2string($form) { return JSON.stringify($form.serializeArray()); } function string2form($form, serializedStr) { var fields = JSON.parse(serializedStr); for(var i = 0; i < fields.length; i++){ var controlName = fields[i].name; var controlValue = fields[i].value; $form.find('[name=' + controlName + ']').val(controlValue); } }

使用form2string对其进行序列化，使用string2form将字符串设置回表单。要存储和检索序列化，您可以使用cookie plugin。

希望这会有所帮助。干杯

PS：JSON方法仅适用于现代浏览器

Answer 2

我更喜欢.serialize()并使用.split()解析.searializeArray()和JSON解析。

qs = $("#form_id").searialize()  // generates query string, e.g: "name=John&age=21"
f = {}
qs.split("&").map( p => p.split("=") ).forEach( ([k,v]) => f[k] = v )
// f === {name: "John", age: "21"}

Answer 3

受埃德加答案的启发，但复制粘贴的版本。

var form = $('form');
if (form.length) {
    var form_data = readCookie('saved_form');
    if (form_data != null) {
        string2form(form, form_data);
    }

    form.submit(function() {
        var form_data = form2string(form);
        createCookie('saved_form', form_data, 5);
    });
}

function createCookie(name, value, days) {
    var expires;

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = encodeURIComponent(name) + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ')
            c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0)
            return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
    return null;
}


function form2string($form) {
  return JSON.stringify($form.serializeArray());
}

function string2form($form, serializedStr) {
  var fields = JSON.parse(serializedStr);
  for(var i = 0; i < fields.length; i++){
    var controlName = fields[i].name;
    var controlValue = fields[i].value;
    if (controlValue != '' && $form.find('[name=' + controlName + ']').val() == ''){
        $form.find('[name=' + controlName + ']').val(controlValue);
    }
  }
}

jQuery存储和检索表单状态（带数据）

更新

3 个答案: