Question

我正在使用下面的脚本根据需要生成输入字段。但是，在刷新或单击提交错误页面时，输入的字段和信息将消失。点击后退或刷新页面后有没有办法保留字段？

$(document).ready(function() {
var MaxInputs       = 67;
var InputsWrapper   = $("#InputsWrapper"); 
var AddButton       = $("#AddMoreFileBox");
var x = InputsWrapper.length;
var FieldCount=8; 
$(AddButton).click(function (event)
{
    if(x <= MaxInputs) 
    {
        FieldCount++; 
        $(InputsWrapper).append('<div><input type="text" class="input" size="22"  
        maxlength="80" name="hostname'+ FieldCount +'" id="field_'+ FieldCount +'"/>
        <input class="left-margin" type="text" SIZE="15" MAXLENGTH="15" name="ipaddr'+ 
        FieldCount +'" id="field_'+ FieldCount +'"/><input class="left-margin" 
        type="text" SIZE="15" MAXLENGTH="15" name="app'+ FieldCount +'" id="field_'+ 
        FieldCount +'"/> <button type="button"class="removeclass">Remove</button> 
        </div>');
        x++; 
    }
return false;
});
   $("body").on("click",".removeclass", function(event){
    if( x > 1 ) {
            $(this).parent('div').remove();
            x--;
    }
 return false;

 }) 
 });

Answer 1

如果您可以使用HTML5功能，一种方法是使用本地存储。创建输入字段时，可以在本地存储中保存所执行的操作。

这样，当您加载页面时，您可以检查本地存储中的内容，检测之前是否先加载过该页面，然后重新构建以前动态添加的字段。

这样的事情：

$(document).ready(function(){
    $("#myButton").click(function(){
        var htmlAppend = '<input type="text" name="theName" />';
        $("#content").append(htmlAppend);
        //After appropriate checks that local storage is supported...
        localStorage.setItem("htmlAppend", htmlAppend);
    });

    var htmlAppend = localStorage.getItem("htmlAppend");
    if (htmlAppend) {
        $("#content").append(htmlAppend);
    }
});

这当然只是一个给出方向的例子。您可能需要注意的其他事项：

如果可以通过多个事件添加其他几个HTML，则必须更新本地存储而不是仅设置它。即：检查已存储的内容，并将新内容附加到其中（如果有）。
这不会保存您可能附加到动态HTML的事件处理程序。如果你想实现它，你将不得不在存储值中对它进行编码。

Answer 2

您的问题在于服务器客户端逻辑的实现以及正在删除元素及其数据的操作。

使用浏览器的后退按钮（或其任何快捷方式）而不是系统中提供的任何功能（例如，后退按钮会触发允许您在之前保存当前页面上的数据的事件返回），丢失用户没有保存的任何工作是适当的行动方案（同样适用于点击刷新）。

我建议解决此问题的方法是使用您可以随意使用的任何服务器端工具，以便在发生这些事件时保存此信息（Djizeus答案很棒，但您可能需要考虑非HTML5兼容的浏览器，除非您的应用程序不是针对他们的）并在用户触发这些事件时执行检查和其他操作：

有关如何在用户存在当前页面之前执行操作，请参阅this示例。

刷新后通过jquery保留动态生成的输入字段

2 个答案: