是否可以存储表单的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);
解决方法
使用
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();
let entry;
while(!(entry = entries.next()).done) {
const [key,val] = entry.value,//http://javascript-coder.com/javascript-form/javascript-form-value.phtml
input = form.elements[key];
switch(input.type) {
case 'checkBox': input.checked = !!val; break;
default: input.value = val; break;
}
}
}
警告：formDeserialize()不会清除未包含在存储数据中的字段,例如空的无线电组或复选框.此外,未使用所有< input>进行测试类型.