Question

我有一位同事向我求助，但我无法做到。基本上他创建了一个包含div元素和子div元素的纯java脚本页面。这些子div元素中的每一个都有一个表单。他希望能够将所有分层数据保存在文本文件中，无论它是否在json / html中，以后可以在其中加载它而无需再次手动处理它。这样，下次当人们加载页面时，他们会看到所有相同的信息和div元素。

因此，当您再次加载页面时，您可以简单地将json / html转储到DoM中，它将自动运行。他现在已经上了两天了，我想我会请你们帮忙或者至少引导我走上正确的道路。

Answer 1

这样做需要三个步骤：

从DOM获取所有表单数据值（一个简单的事项就是知道如何访问HTML表单并将它们放入对象中）
将表单数据对象保存到localStorage或服务器上（保存在服务器上只有保存一些有关用户的识别信息，如他们已登录或其IP地址）
在表单加载时，检查已保存的数据（在localStorage或服务器上）并将其加载到表单中。

您可以将所有表单的数据转换为JSON对象，如下所示：

function getAllFormsData(){

   var formsData = {}

   for(var i=0;i<document.forms.length;i++){

       var form = document.forms[i],
           name = document.forms[i].name;
       formsData[name] = {}

       for(var j=0;j<form.elements.length;j++){
           var element = form.elements[j];
           if(element.type=="submit") continue;
           formsData[name][element.name] = element.value;
       }
    }
    return formsData;
}

所以formsData是一个JSON对象，它包含页面上每个表单的属性（按名称，但你可以使用ID），每个属性的值都是一个包含每个输入元素的名称和值（除非它是submit类型元素）。

用户点击页面上的“保存”按钮或使用window.onunload事件可以触发保存数据。（如果您使用的是localStorage，您还可以在setInterval内设置每隔30秒触发一次的保存功能。）

localStorage非常简单（with a really easy API），但只允许字符串值。如果要将整个对象加载到其中而不必循环并保存每个值，则可以使用库。我发现store.js非常有用且简单明了，它会为您序列化数据，因此您无需使用JSON.parse或JSON.stringify。

因此，使用该库，保存功能可以简化为：

function saveAllFormsData(){
    var data = getAllFormsData();
    for(var formName in data)
        store.set(formName, data[formName]);
}

在加载时，您可以调用此函数：

function restoreAllFormsData(){

    var forms = document.forms;
    for(var i=0;i<forms.length;i++){
        var form = forms[i];
        if(store.get(form.name)){
                for(var j=0;j<form.elements.length;j++){
                    var element = form.elements[j];
                    if(element.type=="submit")
                        continue;
                    element.value = store.get(form.name)[element.name];
                }               
        }
    }
}

Answer 2

我建议调查 HTML5 local storage。这将允许您在客户端上保存表单数据，可在必要时用于重新填充。

或者，您也可以在客户端上设置cookie。然而，该方法具有在前述文献中讨论的缺点。

由于这些数据存储方法的关键：值性质，这两种方法都可能需要您在存储之前stringify任何HTML。

从DoM加载div对象。转换为文本文件。然后在重新加载页面时重新加载div对象

2 个答案: