javascript - 从 FormData 对象填充 HTML 表单

Question

是否可以存储表单的 FormData 对象，然后使用该 FormData 对象将存储的 FormData 值重新填充回表单？

例如:HTML

<form id="test_form">
  <input type="text" name="last_name" placeholder="Last Name"/><br/>
  <input type="text" name="first_name" placeholder="First Name"/><br/>
  <input type="date" name="date_of_birth" placeholder="Date of Birth"/><br/>
</form>

Javascript

var f = document.getElementById('test_form');
var data = FormData(f);
...
// mythical function to translate FormData back into form values
f.values(data);

Answer 1

使用 this和 this ，这是我序列化和反序列化表单数据的方式:

function formSerialize(form) {
    const data = new FormData(form);
    //https://stackoverflow.com/a/44033425/1869660
    return new URLSearchParams(data).toString();
}

function formDeserialize(form, data) {
    const entries = (new URLSearchParams(data)).entries();
    for(const [key, val] of entries) {
        //http://javascript-coder.com/javascript-form/javascript-form-value.phtml
        const input = form.elements[key];
        switch(input.type) {
            case 'checkbox': input.checked = !!val; break;
            default:         input.value = val;     break;
        }
    }
}

警告:formDeserialize()不会清除未包含在存储数据中的字段，例如空单选组或复选框。此外，未对所有 <input> 进行测试类型。