javascript - 刷新后通过 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 的事件处理程序。如果您想实现这一点，您将必须以某种方式在存储值中对其进行编码。