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

【问题标题】：jQuery Storage and retrieval form state (with data)jQuery 存储和检索表单状态（带数据）
【发布时间】：2018-11-30 00:37:46
【问题描述】：

有没有办法将表单状态存储在例如 cookie 中并检索它？
我检查了serialize API，但我不知道如何检索表单上的序列化数据。
有可能吗？

更新

我输入了我的代码here。在 // End of cookie plugin 之后检查 javascript 代码，因为我确信 jQuery 插件工作正常。

【问题讨论】：

有一个插件叫dumbFormState。试试看

标签： jquery

【解决方案1】：

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

$("#your_form").serialize()

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

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

这样，我们可以构建一个“form to string”函数和一个“string back 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 方法仅适用于现代浏览器

【讨论】：

Villegas Alvarado 正如我所说，我知道序列化 API，但我不知道如何在表单上检索序列化数据。
Villegas Alvarado 非常感谢您的关注。我使用了你的代码，但我不知道为什么它不起作用......我把我的代码放在这里jsfiddle.net/BwUM4/1 我确信 jQuery 插件可以正常工作。请您检查我的代码或在 Jsfiddle 上创建示例示例吗？
在 // cookie 插件结束后检查 javascript 代码，因为我确信 jQuery 插件工作正常。
我更改了您的 jsfiddle 中的一些部分，现在运行正常。一些注意事项：.serializeArray() 只能应用于<form> 元素，因此我将您的<div> 替换为<form>。此外，序列化需要元素有一个名称，我也将其添加到元素中。现在它运行良好！
@非常感谢 :) 那么我们不能将 serializeArray 与 Div 一起使用吗？

【解决方案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"}

【讨论】：

【解决方案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);
    }
  }
}

【讨论】：