テストデータをそのまま維持するには？

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）またはセッションベース（sessionStorage）を持っているWebStorageですあなたはブラウザを閉じます。

私はlocalStorageは、あなたが今探しているものであると仮定します：

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

    // ... 
} 

そして、あなたはページをロード：

window.onload = function() { 

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

    // ... 
}