如何将输入/选择的值从网站保存到XML / JSON文件并使用JavaScript自动加载再次填充

Question

我有一个问题，关于将输入/选择值从网站保存到XML / JSON文件并再次自动加载时进行加载。

到目前为止，我已经设法写了这个： https : //jsfiddle.net/Lwvum3qe/17/

有很多代码，jsfiddle上的片段可以让您大致了解代码的功能。 最重要的位是：

function downloadData(contentType,data,filename){

   var link=document.createElement("A");
   link.setAttribute("href",encodeURI("data:"+contentType+","+data));
   link.setAttribute("style","display:none");
   link.setAttribute("download",filename);
   document.body.appendChild(link); //needed for firefox
   console.log(link.outerHTML);
   link.click();
   setTimeout(function(){
    document.body.removeChild(link);
   },1000);
}

function fromToXml(form){
    var xmldata=['<?xml version="1.0"?>'];
      xmldata.push("<form>");
    var inputs=form.elements;
    for(var i=0;i<inputs.length;i++){
        var el=document.createElement("ELEMENT");
      if (inputs[i].name){
        el.setAttribute("name",inputs[i].name);
        el.setAttribute("value",inputs[i].value);
        xmldata.push(el.outerHTML);
      }

    }
    xmldata.push("</form>");
    return xmldata.join("\n");
}


function download(frm){

    var data=fromToXml(frm);
  console.log(data);

  downloadData("text/xml",data,"export.xml");
}

我使用许多表格，因此一次只能保存一次。 我尝试用div替换主要形式（“容器”），但它根本没有帮助。 该功能读取所有复选框数据，无论是否已选中它们。 是否只能从已检查的数据中读取数据？ 在这种情况下，根本不会保存选择。

总体思路是，我需要能够从文件中读取数据，并根据该数据填写所有输入/复选框/选择字段。 我知道有很多打开文件和解析文件的方法，但我更喜欢使用您可以提供的最简单的方法。 我是JS的初学者，无论哪种语言，我从来都不擅长解析文件。 😞

衷心感谢您愿意提供的任何帮助和提示。

Answer 1

在fromToXml函数中，您正在检查inputs[i].name 。 您应该检查inputs[i].checked 。

我也有一些技巧，我认为您可以使用这些技巧来改进您的代码：

1. 除非用户可以选中同一类型（数组）的多个复选框，否则请勿对多个复选框使用相同的名称。 如果它是一个数组，则应在名称后使用[] 。 例如，应将<input name="choice">重命名为<input name="choice[]" /> 。
2. 如果您使用的是jQuery，请使用jQuery；否则，请使用jQuery。 避免使用本机方法。
3. 您也可以使用伪类:checked获取选中的复选框。
4. 除非您特别需要XML，否则建议您使用JSON。 JSON代表JavaScript对象表示法是有原因的：JavaScript很好地支持JSON。
5. 学习使用本机Array方法，例如forEach ， map和filter 。 jQuery也有自己的数组方法，例如.map和.each

通过使用这些技巧，这是一个更漂亮的getData函数（从fromToXML重命名）。

function getData(form){
  return $(form).find(":checked").map(function(){
    return {
      name: this.name, 
      value: this.value
    };
  }).toArray();
}

然后，您可以使用以下命令在文档中的任何位置调用此函数：

var data = getData(myForm);
var dataAsString = JSON.stringify(data);