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

Posted 2023-05-08

【中文标题】如何将输入/选择值从网站保存到 XML/JSON 文件并使用 JavaScript 自动加载再次填充它们

【英文标题】：How to save input/select values from a website to an XML/JSON file and loading automatically filling them out again using JavaScript

【发布时间】：2019-01-09 12:38:47

【问题描述】：

我有一个关于将输入/选择值从网站保存到 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 的初学者，而且我从来不擅长解析文件，不管是什么语言。 ????

如果您愿意提供任何帮助和提示，我将不胜感激。

【问题讨论】：

我很好奇，你为什么需要 XML？您可以使用 JSON，您的流程可能会更加顺畅。

没有区别。我提出了 XML，但如果 JSON 更好，我可以使用它

【参考方案1】：

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

我还有一些我认为您可以用来改进代码的技巧：

不要对多个复选框使用相同的名称，除非用户可以选中多个相同类型的复选框（一个数组）。如果它是一个数组，你应该在你的名字后面使用[]。例如，<input name="choice"> 应重命名为 <input name="choice[]" />。 如果您使用的是 jQuery，请使用 jQuery；避免使用本机方法。 您还可以使用伪类:checked 来获取选中的复选框。 除非您特别需要 XML，否则我建议您使用 JSON。 JSON 代表 javascript Object Notation 的原因是：它在 JavaScript 中得到很好的支持。 学习使用原生Array methods，例如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);