동적으로 추가 된 컨트롤의 상태로 돌아가려면 뒤로 단추

Question

JavaScript를 사용하여 컨트롤을 폼에 추가하는 HTML 폼이 있습니다. 예를 들어 양식의 단추를 클릭하면 텍스트 상자가 양식에 추가됩니다.

사용자가 양식을 제출하면 사용자가 다른보기로 이동합니다. 그러나 사용자가 브라우저에서 뒤로 버튼을 클릭하면 이전 폼 (컨트롤을 추가하는 버튼이 있음)으로 이동하지만 이전에 동적으로 추가 한 텍스트 상자 중 아무 것도 나타나지 않습니다. 그러나 다른 정적 양식 컨트롤은 이전에 입력 한 데이터로 표시됩니다.

어떻게하면 뒤로 버튼을 누르면 이전 상태로 돌아갈 수 있습니까? 또는 맞춤 검색 버튼에이를 구현해야합니까? 어떻게해야합니까?

Answer 1

sessionStorage이 적합해야합니다.

1. 모든 필드는 sessionStorage에 저장하는 경우 사용자가 입력 필드를 추가 할 때, 사용자 프레스 "다시"를 sessionStorage
2. 에,뿐만 아니라 그 값의로, 추가 된 사실을 저장, 확인 , 해당 경우,
3. 저장소에 추가 된 필드에 따라 양식을 다시 빌드하십시오.
4. 필드가 제거되면 항목을 제거하는 것을 잊지 마십시오.

일부 의사 코드 :

function fieldAdded(name, value){ 
    sessionStorage[name] = value; 
    // You can also use this function to update the saved value, when fields are edited. 
} 

function pageLoad(name, value){ // load event after pressing "back" 
    var optionalFields = ['telephone','fax','name','description']; 
    for(var i = 0; i < optionalFields.length; i++){ 
     if(sessionStorage[optionalFields[i]]){ 
      // addField(Name, value); 
      addField(optionalFields[i], sessionStorage[optionalFields[i]]); 
     } 
    } 
} 

function fieldRemoved(name){ 
    delete sessionStorage[name]; 
}