是否可以将表单数据保存到本地计算机上的数据文件中，然后将该文本文件重新加载回表单中以选择相同的项目？

Question

我有一个相当广泛的表格，用于创建 3-4 页的报告。有时，由于某种原因，我无法填写并提交表格来生成报告。是否可以以某种方式将表单字段中的值保存到本地设备上的文件中，然后在稍后将该数据重新加载回表单中，以便检查/选择/加载所有相同的值？我假设我需要某种类型的 Javascript 按钮来循环并读取项目是否被选中，但我不确定如何保存和加载该信息。该表格的一个简短示例可能是：

<form method="POST" action="processnote.php">

    <legend>

        <h1>Academic Background</h1>

    </legend>

    <b>Highest Education Level</b>

    <ul class="checkbox">

        <li><input type="checkbox" name="education[]" id="education0" value="no formal education"><label for="education0">No Formal Education</label></li>

        <li><input type="checkbox" name="education[]" id="education1" value="some high school"><label for="education1">Some High School</label></li>

        <li><input type="checkbox" name="education[]" id="education2" value="high school/GED"><label for="education2">High School</label></li>

        <li><input type="checkbox" name="education[]" id="education3" value="some college"><label for="education3">Some College</label></li>

        <li><input type="checkbox" name="education[]" id="education4" value="trade school"><label for="education4">Trade School</label></li>

        <li><input type="checkbox" name="education[]" id="education5" value="an associate degree"><label for="education5">Associate's Degree</label></li>

        <li><input type="checkbox" name="education[]" id="education6" value="a bachelor degree"><label for="education6">Bachelor's Degree</label></li>

        <li><input type="checkbox" name="education[]" id="education7" value="a master degree"><label for="education7">Master's Degree</label></li>

        <li><input type="checkbox" name="education[]" id="education8" value="a doctoral degree"><label for="education8">Doctoral Degree</label></li>

        <li><label for="education9">Other:</label><input type="text" name="education[]" id="education9" value=""></li>

    </ul>

    </p>

</form>

因此，如果选择“高中”和“某大学”并在文本字段中键入“证书课程”，我如何将这些值保存到文件中，然后将这些值重新加载回表单的清晰副本中？是否可以？（我知道几乎一切皆有可能......但你知道......对于新手来说这是合理的）

Answer 1

相当复杂的任务，主要在 IE 11 中测试？在开发过程中 FF 遇到了一些问题，但现在它似乎也可以在 FF 和 Chrome 中工作，但在那里没有进行太多测试。var myForm = document.forms[0],&nbsp; formData;myForm.countries.selectedIndex = -1;formData = getFormData(myForm[0]);function saveForm(i) {&nbsp; var values = getFormData(i);&nbsp; // show JSON read&nbsp; document.getElementById("saving").innerText = JSON.stringify(values, null, 1)&nbsp; &nbsp; .replace(/\n "/g, '\n')&nbsp; &nbsp; .replace(/\n*[\{\}]\n*/g, '')&nbsp; &nbsp; .replace(/,\n/g, '\n')&nbsp; &nbsp; .replace(/([^"]+)":/g, '$1:');&nbsp; if (prompt('Clear data now ?', 'Yes will load them by file button') != null) setFormData(myForm, formData);&nbsp; return downloadObjectAsJson(values, "test");}function loadBack(t) {&nbsp; var f = t.files[0];&nbsp; var reader = new FileReader();&nbsp; // Closure to capture the file information.&nbsp; reader.onload = (function(theFile) {&nbsp; &nbsp; return function(e) {&nbsp; &nbsp; &nbsp; var json = JSON.parse(e.target.result);&nbsp; &nbsp; &nbsp; setFormData(myForm, json);&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; })(f);&nbsp; // Read in the image file as a data URL.&nbsp; reader.readAsText(f);}function setFormData(frm, values) {&nbsp; for (var v in values) {&nbsp; &nbsp; var el = frm[v],&nbsp; &nbsp; &nbsp; val = values[v];&nbsp; &nbsp; if (el.constructor == HTMLCollection) {&nbsp; &nbsp; &nbsp; // case "radio":&nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; values[el.name].checked = val;&nbsp; &nbsp; &nbsp; // break;&nbsp; &nbsp; &nbsp; for (var p = 0; p < el.length; p++) {&nbsp; &nbsp; &nbsp; &nbsp; el[p].checked = (el[p].value === val);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } else switch (el.type) {&nbsp; &nbsp; &nbsp; case "checkbox":&nbsp; &nbsp; &nbsp; &nbsp; el.checked = val;&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 'select-one':&nbsp; &nbsp; &nbsp; &nbsp; if (val < 0) el.selectedIndex = val;&nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var o = 0; o < el.options.length; o++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (el.options[o].value == val) el.selectedIndex = o;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 'select-multiple':&nbsp; &nbsp; &nbsp; &nbsp; for (var o = 0; o < el.options.length; o++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el.options[o].selected = (val.indexOf(el.options[o].value) > -1);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; el.value = val;&nbsp; &nbsp; }&nbsp; }}function getFormData(i) {&nbsp; var frm = i.form;&nbsp; var values = {};&nbsp; for (var a = 0; a < frm.length; a++) {&nbsp; &nbsp; var el = frm[a];&nbsp; &nbsp; switch (el.type) {&nbsp; &nbsp; &nbsp; case "checkbox":&nbsp; &nbsp; &nbsp; &nbsp; values[el.name] = el.checked;&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case "radio":&nbsp; &nbsp; &nbsp; &nbsp; if (el.checked) values[el.name] = el.value;&nbsp; &nbsp; &nbsp; &nbsp; else if (values[el.name] === undefined) values[el.name] = false;&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 'select-one':&nbsp; &nbsp; &nbsp; &nbsp; values[el.name] = el.selectedIndex < 0 ? -1 : el.options[el.selectedIndex].value;&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 'select-multiple':&nbsp; &nbsp; &nbsp; &nbsp; values[el.name] = [];&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < el.options.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (el.options[i].selected) values[el.name].push(el.options[i].value);&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 'fieldset':&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 'button':&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 'submit':&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 'reset':&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 'file':&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case undefined:&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; values[el.name] = el.value;&nbsp; &nbsp; }&nbsp; }&nbsp; return values;}function downloadObjectAsJson(exportObj, exportName) {&nbsp; if (navigator.msSaveBlob) { // IE10+&nbsp; &nbsp; var blob = new Blob([JSON.stringify(exportObj, null, 1)], {&nbsp; &nbsp; &nbsp; type: 'application/json'&nbsp; &nbsp; });&nbsp; &nbsp; return navigator.msSaveBlob(blob, exportName + ".json");&nbsp; }&nbsp; var dataStr = "data:application/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj, null, 1));&nbsp; var downloadAnchorNode = document.getElementsByName('_saveAnchor')[0];&nbsp; downloadAnchorNode.setAttribute("href", dataStr);&nbsp; downloadAnchorNode.setAttribute("download", exportName + ".json");&nbsp; downloadAnchorNode.click();&nbsp; downloadAnchorNode.remove();}<!-- form elements from https://www.fincher.org/tips/web/SimpleForm.shtml --><form>&nbsp; &nbsp;First Name: <input type="text" name="FirstName"/><br />&nbsp; &nbsp;<textarea name="comments"></textarea><br />&nbsp; &nbsp;Password:<input type="password" name="mypassword" value="start"/> „start“ as test value you can get from server<br />&nbsp; &nbsp;<input type="radio" name="title" value="mr" />Mr.<br />&nbsp; &nbsp;<input type="radio" name="title" value="ms" />Ms.<br />&nbsp; &nbsp;<input type="radio" name="title" value="decline"/>decline<br />&nbsp; &nbsp;<fieldset style="margin: 1em; text-align: center;">&nbsp; &nbsp; &nbsp; <legend>Select a Hero</legend>&nbsp; &nbsp; &nbsp; <input type="radio" name="hero"&nbsp; value="Agamemnon" /> Agamemnon&nbsp; &nbsp; &nbsp; <input type="radio" name="hero"&nbsp; value="Achilles" /> Achilles&nbsp; &nbsp; &nbsp; <input type="radio" name="hero"&nbsp; value="Hector" /> Hector&nbsp; &nbsp; &nbsp; <div style="height: 1em;" />&nbsp; &nbsp;</fieldset>&nbsp; &nbsp;<input type="checkbox" name="mail" />Mail me more info<br />&nbsp; &nbsp;<input type="checkbox" name="e-mail" />E-Mail me more info<br />&nbsp; &nbsp; &nbsp; <select name="countries">&nbsp; &nbsp; &nbsp; <option>Argentina</option>&nbsp; &nbsp; &nbsp; <option>Albania</option>&nbsp; &nbsp; &nbsp; <option>Afganistain</option>&nbsp; &nbsp; &nbsp; <option>Aruba</option>&nbsp; &nbsp;</select>&nbsp; &nbsp;<select name="menuitems">&nbsp; &nbsp; &nbsp; <optgroup id="opt1" label="food">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<option>Hamburgers</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<option>Hotdogs</option>&nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp; &nbsp; <optgroup id="opt2" label="drinks">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<option>Coke</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<option>Pepsi</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<option>Water</option>&nbsp; &nbsp; &nbsp; </optgroup>&nbsp; &nbsp;</select>&nbsp; &nbsp;<select name="computerbrands" multiple="multiple">&nbsp; &nbsp; &nbsp; <option value="DELL">DELL</option>&nbsp; &nbsp; &nbsp; <option value="IBM">IBM</option>&nbsp; &nbsp; &nbsp; <option value="HP">HP</option>&nbsp; &nbsp; &nbsp; <option value="Compaq">Compaq</option>&nbsp; &nbsp; &nbsp; <option value="Sony">Sony</option>&nbsp; &nbsp;</select>&nbsp; &nbsp;<select name="countries2" size="4">&nbsp; &nbsp; &nbsp; <option value="0">Argentina</option>&nbsp; &nbsp; &nbsp; <option value="1">Albania</option>&nbsp; &nbsp; &nbsp; <option value="2">Afganistain</option>&nbsp; &nbsp; &nbsp; <option value="3">Aruba</option>&nbsp; &nbsp; &nbsp; <option value="4">Arabia</option>&nbsp; &nbsp;</select>&nbsp; &nbsp;<input type="hidden" name="computerType" value="hidden DELL" />&nbsp; &nbsp;<input type="submit" name="submitbutton" value="Submit" />&nbsp; &nbsp;<a name="_saveAnchor"><input type="button" value="Save content as JSON" onclick="saveForm(this)"></a>&nbsp; &nbsp;<input type="file" name="formFile" onchange="loadBack(this)"/></form><div id="saving"></div>制作了 2 个新书签，唯一的问题是找到合适的形式......这 1 会将最长的形式保存为 JSONjavascript:f=document.forms,longest=0;frm=0;for(i=0;i<f.length;i++)if(f[i].length>longest){longest=f[i].length;frm=f[i]}values={};for(a=0;a<longest;a++){el=frm[a];switch(el.type){case"checkbox":values[el.name]=el.checked;break;case"radio":if(el.checked)values[el.name]=el.value;else&nbsp;if(values[el.name]===undefined)values[el.name]=false;break;case'select-one':values[el.name]=el.selectedIndex<0?-1:el.options[el.selectedIndex].value;break;case'select-multiple':values[el.name]=[];for(i=0;i<el.options.length;i++){if(el.options[i].selected)values[el.name].push(el.options[i].value)}break;case'fieldset':break;case'button':break;case'submit':break;case'reset':break;case'file':break;case&nbsp;undefined:break;default:values[el.name]&nbsp;=&nbsp;el.value}}dataStr="data:application/json;charset=utf-8,"+encodeURIComponent(JSON.stringify(values));dwn=document.createElement('A');dwn.setAttribute("href",dataStr);dwn.setAttribute("download",location.href.split('/').pop()+".json");dwn.click();dwn.remove();undefined或者格式化内容f = document.forms, longest = 0; frm = 0;for (i = 0; i < f.length; i++)&nbsp; &nbsp; if (f[i].length > longest) { longest = f[i].length; frm = f[i] }values = {};for (a = 0; a < longest; a++) {&nbsp; &nbsp; el = frm[a];&nbsp; &nbsp; switch (el.type) {&nbsp; &nbsp; &nbsp; &nbsp; case "checkbox": values[el.name] = el.checked;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case "radio":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (el.checked)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values[el.name] = el.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if (values[el.name] === undefined)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values[el.name] = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 'select-one': values[el.name] = el.selectedIndex < 0 ? -1 : el.options[el.selectedIndex].value; break;&nbsp; &nbsp; &nbsp; &nbsp; case 'select-multiple': values[el.name] = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (i = 0; i < el.options.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (el.options[i].selected)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values[el.name].push(el.options[i].value)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 'fieldset': break;&nbsp; &nbsp; &nbsp; &nbsp; case 'button': break;&nbsp; &nbsp; &nbsp; &nbsp; case 'submit': break;&nbsp; &nbsp; &nbsp; &nbsp; case 'reset': break;&nbsp; &nbsp; &nbsp; &nbsp; case 'file': break;&nbsp; &nbsp; &nbsp; &nbsp; case undefined: break;&nbsp; &nbsp; &nbsp; &nbsp; default: values[el.name] = el.value&nbsp; &nbsp; }} dataStr = "data:application/json;charset=utf-8," + encodeURIComponent(JSON.stringify(values));dwn = document.createElement('A');dwn.setAttribute("href", dataStr);dwn.setAttribute("download", location.href.split('/').pop() + ".json");dwn.click();dwn.remove(); undefined这将从JSON 读取表单javascript:function setFormData(values){f=document.forms,longest=0;frm=0;for(i=0;i<f.length;i++)if(f[i].length>longest){longest=f[i].length;frm=f[i]}for(v in values){el=frm[v];val=values[v];if(el.constructor==HTMLCollection){for(p=0;p<el.length;p++){el[p].checked=(el[p].value===val)}}else switch(el.type){case"checkbox":el.checked=val;break;case'select-one':if(val<0)el.selectedIndex=val;else{for(o=0;o<el.options.length;o++){if(el.options[o].value==val)el.selectedIndex=o}}break;case'select-multiple':for(o=0;o<el.options.length;o++){el.options[o].selected=(val.indexOf(el.options[o].value)>-1)}break;default:el.value=val}}}f=document.createElement("input");f.type="file";f.onchange=(function(){reader=new FileReader();reader.onload=(function(theFile){return function(e){json = JSON.parse(e.target.result);setFormData(json);return;}})(event.srcElement.files[0]);reader.readAsText(event.srcElement.files[0]);});document.body.prepend(f);f.focus();和这个：function setFormData(values) {&nbsp; &nbsp; f = document.forms, longest = 0; frm = 0;&nbsp; &nbsp; for (i = 0; i < f.length; i++)&nbsp; &nbsp; &nbsp; &nbsp; if (f[i].length > longest) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; longest = f[i].length; frm = f[i]&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; for (v in values) {&nbsp; &nbsp; &nbsp; &nbsp; el = frm[v]; val = values[v];&nbsp; &nbsp; &nbsp; &nbsp; if (el.constructor == HTMLCollection) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (p = 0; p < el.length; p++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el[p].checked = (el[p].value === val)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; } else switch (el.type) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "checkbox": el.checked = val;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'select-one':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (val < 0) el.selectedIndex = val;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (o = 0; o < el.options.length; o++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (el.options[o].value == val) el.selectedIndex = o&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'select-multiple':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (o = 0; o < el.options.length; o++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el.options[o].selected = (val.indexOf(el.options[o].value) > -1)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default: el.value = val&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}f = document.createElement("input");f.type = "file";f.onchange = (function () {&nbsp; &nbsp; reader = new FileReader();&nbsp; &nbsp; reader.onload = (function (theFile) {&nbsp; &nbsp; &nbsp; &nbsp; return function (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; json = JSON.parse(e.target.result);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setFormData(json);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })(event.srcElement.files[0]);&nbsp; &nbsp; reader.readAsText(event.srcElement.files[0]);});document.body.prepend(f);f.focus();制作了另外 2 个书签，现在使用 aria-label 和 className (hasOutput) 等。javascript:f=document.forms,longest=0;frm=0;for(i=0;i<f.length;i++)if(f[i].length>longest){longest=f[i].length;frm=f[i]}values={};for(a=0;a<longest;a++){el=frm[a];switch(el.type){case "checkbox":values[el.name]=el.checked;break;case "radio":if(el.checked)values[el.name]=el.value;else if(values[el.name]===undefined){values[el.name]=false;continue}break;case "select-one":values[el.name]=el.selectedIndex<0?-1:el.options[el.selectedIndex].value;break;case "select-multiple":values[el.name]=[];for(i=0;i<el.options.length;i++){if(el.options[i].selected)values[el.name].push(el.options[i].value)}break;case "fieldset":case "button":case "submit":case "reset":case "file":case "hidden":case undefined:continue;default:values[el.name]=el.value}var old=values[el.name];delete values[el.name];if(!old)continue;var names=[],passed={};do{var el2=el;do{if(el2.className=="hasOutput"&&!passed[el2.innerText]){names.push(el2.innerText);passed[el2.innerText]=1}el2=el2.firstElementChild}while(el2)if(el.ariaLabel&&!passed[el.ariaLabel]){names.push(el.ariaLabel.trim());passed[el.ariaLabel]=1}}while(el=el.parentElement)if(names[0]=="Měna"&&old=="aed")continue;names.reverse();el=values;for(b=0;b<names.length-1;b++){if(!el[names[b]])el[names[b]]={};el=el[names[b]]}el[names[names.length-1]]=old}dataStr="data:application/json;charset=utf-8,"+encodeURIComponent(JSON.stringify(values));dwn=document.createElement("A");dwn.setAttribute("href",dataStr);dwn.setAttribute("download",location.href.split("/").pop()+".json");dwn.click();dwn.remove();undefinedf = document.forms, longest = 0; frm = 0;for (i = 0; i < f.length; i++)&nbsp; &nbsp; if (f[i].length > longest) { longest = f[i].length; frm = f[i] }values = {};for (a = 0; a < longest; a++) {&nbsp; &nbsp; el = frm[a];&nbsp; &nbsp; switch (el.type) {&nbsp; &nbsp; &nbsp; &nbsp; case "checkbox": values[el.name] = el.checked;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case "radio":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (el.checked)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values[el.name] = el.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if (values[el.name] === undefined)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values[el.name] = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; continue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case "select-one": values[el.name] = el.selectedIndex < 0 ? -1 : el.options[el.selectedIndex].value; break;&nbsp; &nbsp; &nbsp; &nbsp; case "select-multiple": values[el.name] = [];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (i = 0; i < el.options.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (el.options[i].selected)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values[el.name].push(el.options[i].value)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case "fieldset":&nbsp; &nbsp; &nbsp; &nbsp; case "button":&nbsp; &nbsp; &nbsp; &nbsp; case "submit":&nbsp; &nbsp; &nbsp; &nbsp; case "reset":&nbsp; &nbsp; &nbsp; &nbsp; case "file":&nbsp; &nbsp; &nbsp; &nbsp; case "hidden":&nbsp; &nbsp; &nbsp; &nbsp; case undefined:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; continue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; default: values[el.name] = el.value&nbsp; &nbsp; }&nbsp; &nbsp; var old = values[el.name];&nbsp; &nbsp; delete values[el.name];&nbsp; &nbsp; if (!old) continue;&nbsp; &nbsp; var names = [], passed = {};&nbsp; &nbsp; do {&nbsp; &nbsp; &nbsp; &nbsp; var el2 = el;&nbsp; &nbsp; &nbsp; &nbsp; do {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (el2.className == "hasOutput" && !passed[el2.innerText])&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; names.push(el2.innerText);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; passed[el2.innerText] = 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el2 = el2.firstElementChild;&nbsp; &nbsp; &nbsp; &nbsp; } while (el2)&nbsp; &nbsp; &nbsp; &nbsp; if (el.ariaLabel && !passed[el.ariaLabel])&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; names.push(el.ariaLabel.trim());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; passed[el.ariaLabel] = 1;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; } while (el = el.parentElement)&nbsp; &nbsp; if (names[0] == "Měna" && old == "aed") continue;&nbsp; &nbsp; names.reverse();&nbsp; &nbsp; el = values;&nbsp; &nbsp; for(b = 0; b < names.length - 1; b++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; if (!el[names[b]])&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el[names[b]] = {}&nbsp; &nbsp; &nbsp; &nbsp; el = el[names[b]];&nbsp; &nbsp; }&nbsp; &nbsp; el[names[names.length-1]] = old;}dataStr = "data:application/json;charset=utf-8," + encodeURIComponent(JSON.stringify(values));dwn = document.createElement("A");dwn.setAttribute("href", dataStr);dwn.setAttribute("download", location.href.split("/").pop() + ".json");dwn.click();dwn.remove(); undefined然后回来javascript:function setFormData(valuesBack){f=document.forms,longest=0;frm=0;for(i=0;i<f.length;i++)if(f[i].length>longest){longest=f[i].length;frm=f[i]}values={};for(a=0;a<longest;a++){el=frm[a];switch(el.type){case "checkbox":values[el.name]=el;break;case "radio":if(el.checked)values[el.name]=el;else if(values[el.name]===undefined){values[el.name]=el;continue}break;case "select-one":values[el.name]=el;break;case "select-multiple":values[el.name]=el;break;case "fieldset":case "button":case "submit":case "reset":case "file":case "hidden":case undefined:continue;break;default:values[el.name]=el}var names=[],passed={};var oldEl=values[el.name];do{var el2=el;do{if(el2.className=="hasOutput"&&!passed[el2.innerText]){names.push(el2.innerText);passed[el2.innerText]=1}el2=el2.firstElementChild}while(el2)if(el.ariaLabel&&!passed[el.ariaLabel]){names.push(el.ariaLabel.trim());passed[el.ariaLabel]=1}}while(el=el.parentElement)names.reverse();el=valuesBack;for(b=0;b<names.length&&el;b++){el=el[names[b]]}if(el===undefined)continue;val=el;el=oldEl;if(el.constructor==HTMLCollection){for(p=0;p<el.length;p++){el[p].checked=(el[p].value===val)}}else switch(el.type){case "checkbox":el.checked=val;break;case "select-one":if(val<0)el.selectedIndex=val;else{for(o=0;o<el.options.length;o++){if(el.options[o].value==val)el.selectedIndex=o}}break;case "select-multiple":for(o=0;o<el.options.length;o++){el.options[o].selected=(val.indexOf(el.options[o].value)>-1)}break;default:el.value=val}}}f=document.createElement("input");f.type="file";f.onchange=(function(){reader=new FileReader();reader.onload=(function(theFile){return function(e){json=JSON.parse(e.target.result);setFormData(json);return}})(event.srcElement.files[0]);reader.readAsText(event.srcElement.files[0])});document.body.prepend(f);f.focus();function setFormData(valuesBack) {&nbsp; &nbsp; f = document.forms, longest = 0; frm = 0;&nbsp; &nbsp; for (i = 0; i < f.length; i++)&nbsp; &nbsp; &nbsp; &nbsp; if (f[i].length > longest) { longest = f[i].length; frm = f[i] }&nbsp; &nbsp; values = {};&nbsp; &nbsp; for (a = 0; a < longest; a++) {&nbsp; &nbsp; &nbsp; &nbsp; el = frm[a];&nbsp; &nbsp; &nbsp; &nbsp; switch (el.type) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "checkbox": values[el.name] = el;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "radio":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (el.checked)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values[el.name] = el;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if (values[el.name] === undefined)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; values[el.name] = el;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; continue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "select-one": values[el.name] = el; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "select-multiple": values[el.name] = el;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "fieldset":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "button":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "submit":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "reset":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "file":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "hidden":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case undefined:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; continue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default: values[el.name] = el&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; var names = [], passed = {};&nbsp; &nbsp; &nbsp; &nbsp; var oldEl = values[el.name];&nbsp; &nbsp; &nbsp; &nbsp; do {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var el2 = el;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; do {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (el2.className == "hasOutput" && !passed[el2.innerText])&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; names.push(el2.innerText);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; passed[el2.innerText] = 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el2 = el2.firstElementChild;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } while (el2)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (el.ariaLabel && !passed[el.ariaLabel])&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; names.push(el.ariaLabel.trim());&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; passed[el.ariaLabel] = 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; } while (el = el.parentElement)&nbsp; &nbsp; &nbsp; &nbsp; names.reverse();&nbsp; &nbsp; &nbsp; &nbsp; el = valuesBack;&nbsp; &nbsp; &nbsp; &nbsp; for(b = 0; b < names.length && el; b++)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el = el[names[b]];&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (el === undefined) continue;&nbsp; &nbsp; &nbsp; &nbsp; val = el; el = oldEl;&nbsp; &nbsp; &nbsp; &nbsp; if(val === true) val = false;&nbsp; &nbsp; &nbsp; &nbsp; else val = val.split('').reverse().join('');&nbsp; &nbsp; &nbsp; &nbsp; if (el.constructor == HTMLCollection) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (p = 0; p < el.length; p++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el[p].checked = (el[p].value === val)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; } else switch (el.type) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "checkbox": el.checked = val;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "select-one":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (val < 0) el.selectedIndex = val;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (o = 0; o < el.options.length; o++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (el.options[o].value == val) el.selectedIndex = o&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case "select-multiple":&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (o = 0; o < el.options.length; o++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; el.options[o].selected = (val.indexOf(el.options[o].value) > -1)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default: el.value = val&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }}f = document.createElement("input");f.type = "file";f.onchange = (function () {&nbsp; &nbsp; reader = new FileReader();&nbsp; &nbsp; reader.onload = (function (theFile) {&nbsp; &nbsp; &nbsp; &nbsp; return function (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; json = JSON.parse(e.target.result);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setFormData(json);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })(event.srcElement.files[0]);&nbsp; &nbsp; reader.readAsText(event.srcElement.files[0]);});document.body.prepend(f);f.focus();

Answer 2

有多种解决方案可以满足您的要求，问题是数据持久性。我鼓励采用一种解决方案，将表单提交和正在进行的表单提交保存到数据库或云中。如果您有兴趣，我们可以讨论这些。一般来说，Web 浏览器并不是为了简单地在客户端上创建、保存和加载数据而设计的。服务器将参与该过程。但是，可以选择在任何现代浏览器上使用本地存储。它比使用 cookie 更强大。每个表单提交还需要一个 ID（如日期/时间戳），以及一个用于选择要加载的表单或创建新表单提交的对话框。