在刷新後通過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兼容除非您的應用程序不針對他們），並且在用戶觸發這些事件時執行檢查和其他操作：

請參閱this示例說明如何在用戶存在當前頁面之前執行操作。