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

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],

  formData;

myForm.countries.selectedIndex = -1;

formData = getFormData(myForm[0]);

function saveForm(i) {

  var values = getFormData(i);

  // show JSON read

  document.getElementById("saving").innerText = JSON.stringify(values, null, 1)

    .replace(/\n "/g, '\n')

    .replace(/\n*[\{\}]\n*/g, '')

    .replace(/,\n/g, '\n')

    .replace(/([^"]+)":/g, '$1:');

  if (prompt('Clear data now ?', 'Yes will load them by file button') != null) setFormData(myForm, formData);

  return downloadObjectAsJson(values, "test");

}

function loadBack(t) {

  var f = t.files[0];

  var reader = new FileReader();

  // Closure to capture the file information.

  reader.onload = (function(theFile) {

    return function(e) {

      var json = JSON.parse(e.target.result);

      setFormData(myForm, json);

      return;

    }

  })(f);

  // Read in the image file as a data URL.

  reader.readAsText(f);

}

function setFormData(frm, values) {

  for (var v in values) {

    var el = frm[v],

      val = values[v];

    if (el.constructor == HTMLCollection) {

      // case "radio":

      //    values[el.name].checked = val;

      // break;

      for (var 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 (var o = 0; o < el.options.length; o++) {

            if (el.options[o].value == val) el.selectedIndex = o;

          }

        }

        break;

      case 'select-multiple':

        for (var o = 0; o < el.options.length; o++) {

          el.options[o].selected = (val.indexOf(el.options[o].value) > -1);

        }

        break;

      default:

        el.value = val;

    }

  }

}

function getFormData(i) {

  var frm = i.form;

  var values = {};

  for (var a = 0; a < frm.length; a++) {

    var 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;

        break;

      case 'select-one':

        values[el.name] = el.selectedIndex < 0 ? -1 : el.options[el.selectedIndex].value;

        break;

      case 'select-multiple':

        values[el.name] = [];

        for (var 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 undefined:

        break;

      default:

        values[el.name] = el.value;

    }

  }

  return values;

}

function downloadObjectAsJson(exportObj, exportName) {

  if (navigator.msSaveBlob) { // IE10+

    var blob = new Blob([JSON.stringify(exportObj, null, 1)], {

      type: 'application/json'

    });

    return navigator.msSaveBlob(blob, exportName + ".json");

  }

  var dataStr = "data:application/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj, null, 1));

  var downloadAnchorNode = document.getElementsByName('_saveAnchor')[0];

  downloadAnchorNode.setAttribute("href", dataStr);

  downloadAnchorNode.setAttribute("download", exportName + ".json");

  downloadAnchorNode.click();

  downloadAnchorNode.remove();

}

<!-- form elements from https://www.fincher.org/tips/web/SimpleForm.shtml -->

<form>

   First Name: <input type="text" name="FirstName"/><br />

   <textarea name="comments"></textarea><br />

   Password:<input type="password" name="mypassword" value="start"/> „start“ as test value you can get from server<br />

   <input type="radio" name="title" value="mr" />Mr.<br />

   <input type="radio" name="title" value="ms" />Ms.<br />

   <input type="radio" name="title" value="decline"/>decline<br />

   <fieldset style="margin: 1em; text-align: center;">

      <legend>Select a Hero</legend>

      <input type="radio" name="hero"  value="Agamemnon" /> Agamemnon

      <input type="radio" name="hero"  value="Achilles" /> Achilles

      <input type="radio" name="hero"  value="Hector" /> Hector

      <div style="height: 1em;" />

   </fieldset>

   <input type="checkbox" name="mail" />Mail me more info<br />

   <input type="checkbox" name="e-mail" />E-Mail me more info<br />

      <select name="countries">

      <option>Argentina</option>

      <option>Albania</option>

      <option>Afganistain</option>

      <option>Aruba</option>

   </select>

   <select name="menuitems">

      <optgroup id="opt1" label="food">

         <option>Hamburgers</option>

         <option>Hotdogs</option>

      </optgroup>

      <optgroup id="opt2" label="drinks">

         <option>Coke</option>

         <option>Pepsi</option>

         <option>Water</option>

      </optgroup>

   </select>

   <select name="computerbrands" multiple="multiple">

      <option value="DELL">DELL</option>

      <option value="IBM">IBM</option>

      <option value="HP">HP</option>

      <option value="Compaq">Compaq</option>

      <option value="Sony">Sony</option>

   </select>

   <select name="countries2" size="4">

      <option value="0">Argentina</option>

      <option value="1">Albania</option>

      <option value="2">Afganistain</option>

      <option value="3">Aruba</option>

      <option value="4">Arabia</option>

   </select>

   <input type="hidden" name="computerType" value="hidden DELL" />

   <input type="submit" name="submitbutton" value="Submit" />

   <a name="_saveAnchor"><input type="button" value="Save content as JSON" onclick="saveForm(this)"></a>

   <input type="file" name="formFile" onchange="loadBack(this)"/>

</form>

<div id="saving"></div>

制作了 2 个新书签，唯一的问题是找到合适的形式......

这 1 会将最长的形式保存为 JSON

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;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 undefined:break;default:values[el.name] = 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++)

    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;

            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 undefined: break;

        default: values[el.name] = 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

这将从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) {

    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();

制作了另外 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();undefined

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;

            break;

        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(); 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) {

    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(val === true) val = false;

        else val = val.split('').reverse().join('');

        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();

Answer 2

有多种解决方案可以满足您的要求，问题是数据持久性。我鼓励采用一种解决方案，将表单提交和正在进行的表单提交保存到数据库或云中。如果您有兴趣，我们可以讨论这些。

一般来说，Web 浏览器并不是为了简单地在客户端上创建、保存和加载数据而设计的。服务器将参与该过程。但是，可以选择在任何现代浏览器上使用本地存储。它比使用 cookie 更强大。

每个表单提交还需要一个 ID（如日期/时间戳），以及一个用于选择要加载的表单或创建新表单提交的对话框。