테스트 데이터를 그대로 유지하는 방법은 무엇입니까?

Question

양식에서 양식을 새로 고치는 것을 방지하려면 어떻게해야합니까? 양식을 성공적으로 보내고 황금 입력 값을 그대로 유지하려고합니다. 이 값은 먼저 검증 된 버튼을 누를 때 생성됩니다.

다른 말로하면 페이지를 새로 고치지 않고 양식을 성공적으로 제출하기를 원합니다. 양식을 제출 한 후 페이지 새로 고침 여부를 테스트하기 위해 검증 된 테스트 버튼 호출을 만들었습니다.

다음은 페이지를 새로 고침 할 때

*, *:before, *:after { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font-family: 'Nunito', sans-serif; 
 
    color: black; 
 
} 
 

 
#myField { 
 
background: gold; 
 
} 
 

 
form { 
 
    max-width: 200px; 
 
    margin: 10px auto; 
 
    padding: 10px 20px; 
 
    background: red; 
 
    border-radius: 8px; 
 
} 
 

 
h1 { 
 
    margin: 0 0 30px 0; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 

 
#x { 
 
    background: rgba(255,255,255,0.1); 
 
    border: none; 
 
    font-size: 16px; 
 
    height: auto; 
 
    margin: 0; 
 
    outline: 0; 
 
    padding: 15px; 
 
    width: 100%; 
 
    background-color: white; 
 
    color: black; 
 
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset; 
 
    margin-bottom: 30px; 
 
} 
 

 
input[type="radio"], 
 
input[type="checkbox"] { 
 
    margin: 0 4px 8px 0; 
 
} 
 

 
select { 
 
    padding: 6px; 
 
    height: 32px; 
 
    border-radius: 2px; 
 
} 
 

 
button { 
 
    padding: 19px 39px 18px 39px; 
 
    color: white; 
 
    background-color: blue; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    font-style: normal; 
 
    border-radius: 5px; 
 
    width: 100%; 
 
    border: 1px solid blue; 
 
    border-width: 1px 1px 3px; 
 
    box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset; 
 
    margin-bottom: 10px; 
 
} 
 

 
fieldset { 
 
    margin-bottom: 30px; 
 
    border: none; 
 
} 
 

 
legend { 
 
    font-size: 1.4em; 
 
    margin-bottom: 10px; 
 
} 
 

 
label { 
 
    display: block; 
 
    margin-bottom: 8px; 
 
    color: white; 
 
} 
 

 
label.light { 
 
    font-weight: 300; 
 
    display: inline; 
 
} 
 

 
.number { 
 
    background-color: #5fcf80; 
 
    color: #fff; 
 
    height: 30px; 
 
    width: 30px; 
 
    display: inline-block; 
 
    font-size: 0.8em; 
 
    margin-right: 4px; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    text-shadow: 0 1px 0 rgba(255,255,255,0.2); 
 
    border-radius: 100%; 
 
} 
 

 
@media screen and (min-width: 480px) { 
 

 
    form { 
 
    max-width: 480px; 
 
    } 
 

 
}

<script> 
 
var i=0; 
 
function increase() 
 
{ 
 
\t i++; 
 
var x=(' '+ (i)); 
 
    document.getElementById('myField').value = x; 
 
//.. 
 
} 
 
</script> 
 
<p style="width: 350px;">Press the proven button first and then fill in the name input and press the submit button. If the number disappers in the proven input then that proves that the form can still refresh the page.</p> 
 
<input type="button" Value="Proven" onclick="increase();"> 
 
<input type="text" id="myField" value="" /> 
 
<br> 
 
<br> 
 
<br> 
 
<form action="" method="post"> 
 
    <h1>Form</h1> 
 
    <label for="x">NAME</label> 
 
    <input type="text" id="x"> 
 
    <button type="submit">SUBMIT</button> 
 
</form>

Answer 1

HTML 데이터는 일반적으로 손실되는 코드를합니다. 이 당신이 데이터를 보존 할 수있는 여러 가지 방법이 있습니다,하지만 당신은 자세한 내용을 구현해야 수동으로

가장 간단하고 널리 지원이 될 때까지 메모리에 기반 당신이 영구 저장 (localStorage)가 WebStorage 또는 세션 (sessionStorage)입니다 브라우저를 닫습니다.

window.onbeforeunload = function() { 
    localStorage.setItem(myField, $('#myField').val()); 

    // ... 
} 

을 때 당신은 페이지로드 :

나는 당신이 지금 무엇을 찾고 localStorage은 가정 것이다 당신이 자바 스크립트에 대한 세션 저장소에 익숙

window.onload = function() { 

    var name = localStorage.getItem(myField); 
    if (myField!== null) $('#myField').val(myField); 

    // ... 
}