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

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兼容的浏览器，除非你的应用程序不针对它们）并在用户触发这些事件时执行检查和其他操作：

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