フォームデータを失うことなく現在のページをリロードする方法は？

Question

フォームデータを失うことなく現在のページをリロードできますか？私は..

window.location = window.location.href; 

と

window.location.reload(true); 

を使用しかし、これら二つのことは、私にとっては、以前のフォーム件のデータを取得することはできません。なにが問題ですか ？ブラウザを手動でリフレッシュすると、フォームデータを失うことはありません。それを理解する方法を教えてください。

ここに私の完全なコード...

<div class="form-actions"> 
     <form> 
      <table cellpadding = "5" cellspacing ="10"> 
       <tr class="control-group"> 
        <td style="width: 100px;"> 
         <div>Name:&nbsp;<font color="red">(*)</font></div> 
        </td> 
        <td> 
         <input type="text" id="inputName" placeholder="Name" required> 
        </td> 
       </tr> 
       <tr class="control-group"> 
        <td> 
         <div>Email:&nbsp;<font color="red">(*)</font></div> 
        </td> 
        <td> 
         <input class="span3" placeholder="user@gmail.com" id= "inputEmail" type="email" required> 
        </td> 
       </tr> 
       <tr class="control-group"> 
        <td> 
         <div>Phone:&nbsp;</div> 
        </td> 
        <td> 
         <input type="text" id="inputPhone" placeholder="phone number"> 
        </td> 
       </tr> 
       <tr class="control-group"> 
        <td> 
         <div>Subject:&nbsp;<font color="red">(*)</font></div> 
        </td> 
        <td> 
         <input type="text" id="inputSubject" placeholder="Subject" required> 
        </td> 
       </tr> 
       <tr class="control-group"> 
        <td colspan ="2"> 
         <div> 
          <div>Detail:&nbsp;</div> 
          <div class="controls"> 
           <textarea id="inputDetail"></textarea> 
          </div> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="2"> 
        <div> 
         <label style="font-weight: bold;" class="checkbox"> <input id="confirmCheck" value="" type="checkbox"> 
           I Agree to the Personal information handling policy 
         </label> 
        </div> 
        <div id = "alert_placeholder"></div> 
         <div class="acceptment"> 
          [Personal information handling policy]<br> <br> 
         </div> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="2"> 
         <div align="center"> 
          <button id="btnConfirm" class="btn btn-primary">Confirm</button> 
          <input type="reset" style="width: 65px; height: 27px;" id="btnReset" class="btn"> 
         </div> 
        </td> 
       </tr> 
      </table> 
     </form> 
    </div> 

そして、私のJSファイルでは..です

function bind() { 
$('#btnConfirm').click(function(e) { 
    if ($('#confirmCheck').is(":checked")) { 
     getConfirmationForSendFAQ(); 
    } 
    else { 
     e.preventDefault(); 
     showalert("You should accept \"Personal Information Policy\" !", "alert-error"); 
    } 
});};function getConfirmationForSendFAQ() { 
    var name = $('#inputName').val(); 
    var email = $('#inputEmail').val(); 
    var phone = $('#inputPhone').val(); 
    var subject = $('#inputSubject').val(); 
    var detail = $('#inputDetail').val(); 

    $('.form-actions').empty(); 
    html = []; 
    html.push("<table cellpadding ='8' class = 'submitInfo'"); 
    html.push("<tr>"); 
    html.push("<td class = 'title'>Name:</div>"); 
    html.push("<td class = 'value'>"+ name +"</td>"); 
    html.push("</tr>"); 

    html.push("<tr>"); 
    html.push("<td class = 'title'>Email Address:</div>"); 
    html.push("<td class = 'value'>"+ email +"</td>"); 
    html.push("</tr>"); 

    if (phone.trim().length > 0) { 
     html.push("<tr>"); 
     html.push("<td class = 'title'>Phone No:</div>"); 
     html.push("<td class = 'value'>"+ phone +"</td>"); 
     html.push("</tr>"); 
    } 

    html.push("<tr>"); 
    html.push("<td class = 'title'>Subject:</div>"); 
    html.push("<td class = 'value'>"+ subject +"</td>"); 
    html.push("</tr>"); 

    html.push("<tr>"); 
    html.push("<td class = 'title'>Detail Info:</div>"); 
    html.push("<td class = 'value'>"+ detail +"</td>"); 
    html.push("</tr>"); 

    html.push("<tr>"); 
    html.push("<td colspan='2'><div align = 'center'>"); 
    html.push("<button id='btnSend' class='btn btn-primary' style='width: 65px;'>Send</button>"); 
    html.push("<button id='btnReturn' class='btn btn-inverse' style='width: 65px; height: 27px; margin-left: 5px;'>Return</button>"); 
    html.push("</div></td></tr>"); 

    html.push("</table>"); 
    $('.form-actions').append(html.join('')); 
    $('#btnReturn').click(function(e) { 
     // HERE I WANT TO KNOW HOW TO DO..... 
    }); 
    $('#btnSend').click(function(e) { 
     alert("Doom"); 
    });} 

Answer 1

あなたはこのようなウェブストレージ、のIndexedDB、WebSQLなどのブラウザでこのデータを保存するために、様々なローカルストレージメカニズムを使用することができます（非推奨）および（IEでとUserDataの）ファイルAPI（非推奨とChromeでのみ使用可能）。

最も単純で最も広くサポートされているのは、ブラウザを閉じるまでメモリに永続的な記憶域（localStorage）またはセッションベース（sessionStorage）があるWebStorageです。両方とも同じAPIを共有しています。

window.onbeforeunload = function() { 
    localStorage.setItem(name, $('#inputName').val()); 
    localStorage.setItem(email, $('#inputEmail').val()); 
    localStorage.setItem(phone, $('#inputPhone').val()); 
    localStorage.setItem(subject, $('#inputSubject').val()); 
    localStorage.setItem(detail, $('#inputDetail').val()); 
    // ... 
} 

のWebストレージが、ここで同期ので、このかもしれ作品を作品：ページをリロードしようとするときに

あなたはたとえば（簡体字）することができますが、このような何かを行います。必要に応じて、各ブラーイベントのデータを、データが入力されているエレメントに格納することができます。あなたがチェックすることができ、ページの読み込み時に

：データが存在しない場合は

window.onload = function() { 

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

    // ... 
} 

getItemはnullを返します。

localStorageの代わりにsessionStorageを使用すると、一時的なものだけを保存することができます。

Answer 2

あなたは（サーバ側はデータでフォームをレンダリングする）データを提出し、ページをリロードする必要があり、リロードするだけではデータが保持されません。あなたのブラウザが手動リフレッシュでフォームデータをキャッシュしている可能性があります（ブラウザ間で同じではありません）。

Answer 3

ページを更新する前に、localStorage（http://www.w3schools.com/html/html5_webstorage.asp）を使用して値を保存することができます。

Answer 4

通常、自分のフォームを自動的にサーバーに送信し、埋め込まれた引数でページをリロードします。プレースホルダー引数をサーバーが受け取ったパラメーターで置き換えます。

Answer 5

HTML5 LocaStorageで同意します。 This is example code

Answer 6

これをGitHubで検索してください。それのために特別に作成されました。

https://gist.github.com/zaus/4717416

Answer 7

この答えは、私にとって非常に便利だった、と手動で各フィールドを経由する手間を省くことができます：

Using jQuery to store the state of a complicated form

Answer 8

window.location.reload() // without passing true as argument 

私の作品

。

Answer 9

私の目的のためにK3Nのコードを修正しました。他の人がsessionStorageの仕組みを理解するのに役立つコメントを追加しました。いくつかの答えとして

<script> 
    // Run on page load 
    window.onload = function() { 

     // If sessionStorage is storing default values (ex. name), exit the function and do not restore data 
     if (sessionStorage.getItem('name') == "name") { 
      return; 
     } 

     // If values are not blank, restore them to the fields 
     var name = sessionStorage.getItem('name'); 
     if (name !== null) $('#inputName').val(name); 

     var email = sessionStorage.getItem('email'); 
     if (email !== null) $('#inputEmail').val(email); 

     var subject= sessionStorage.getItem('subject'); 
     if (subject!== null) $('#inputSubject').val(subject); 

     var message= sessionStorage.getItem('message'); 
     if (message!== null) $('#inputMessage').val(message); 
    } 

    // Before refreshing the page, save the form data to sessionStorage 
    window.onbeforeunload = function() { 
     sessionStorage.setItem("name", $('#inputName').val()); 
     sessionStorage.setItem("email", $('#inputEmail').val()); 
     sessionStorage.setItem("subject", $('#inputSubject').val()); 
     sessionStorage.setItem("message", $('#inputMessage').val()); 
    } 
</script> 

Answer 10

言うまでもなく、localStorageは良いオプションであり、あなたは確かにそれを自分で行うことができますが、洗練さオプションを探しているなら、これはgarlic.jsと呼ばれるんGitHubの上のプロジェクトがすでにあります。