1. 首頁
  2. 問答
  3. 如何在不丟失任何表單數據的情況下重新加載當前頁面？

如何在不丟失任何表單數據的情況下重新加載當前頁面？

2013-07-11 45 views
40

我可以在不丟失任何表單數據的情況下重新加載當前頁面嗎？我用..如何在不丟失任何表單數據的情況下重新加載當前頁面？

window.location = window.location.href;

和

window.location.reload(true);

但是這兩個東西不能給我弄早期形式DATAS。哪裏不對 ？當手動刷新瀏覽器時，它很好（我不會丟失任何表單數據）。請指導我如何弄清楚。

這裏是我的全部代碼...

<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="[email protected]" 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"); 
    });}

來源

2013-07-11 Cataclysm

回答

41

您可以使用各種本地存儲機制將此數據存儲在諸如Web Storage，IndexedDB，WebSQL（不建議使用）和File API（不建議使用且僅在Chrome中可用）（和帶有IE的UserData）的瀏覽器中。

最簡單和最廣泛的支持是WebStorage，其中您持續存儲（localStorage）或基於會話（sessionStorage），它在內存中，直到您關閉瀏覽器。兩者共享相同的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如果數據不存在。

如果您只想存儲臨時文件，請使用sessionStorage而不是localStorage。

來源

2013-07-11 11:15:09 K3N

+0

@Cataclysm如果意圖回到表單，你可以使用'history.go（-1）;'而不是？ – K3N

+0

@ Ken - Abdias歷史版本.go（-1）;或history.back（）;這些將重定向上一頁。不是以前，我想重新加載當前頁面，並且我已經測試過這個兄弟！謝謝... – Cataclysm

+1

這對我很感謝。但我需要更正您的答案： 1）localStorage.setItem（'name'，... 2）if（name！== null）$（'＃inputName'）。val（'name'）; =>沒有引號這個解決方案不適合我。我通過WebStorage上的官方指南更正它。 –

2

你必須提交數據並重新加載頁面（服務器端渲染數據形式），只是重新加載不會保存數據。這只是你的瀏覽器可能在手動刷新上緩存表單數據（跨瀏覽器不同）。

來源

2013-07-11 11:00:24 Dileep

3

我通常會自動將自己的表單提交給服務器，並使用填充的參數重新加載頁面。將佔位符參數替換爲您的服務器收到的參數。

來源

2013-07-11 11:06:50 moutonjr

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

對我的作品。

來源

2015-09-24 12:00:39

+0

但只限於FireFox * –

+1

使用IE這不會保留頁面的字段值。由於我現在正在經歷這個問題，我正在研究[Julian K的鏈接]（http://stackoverflow.com/a/24223857/1016343），它看起來很有希望保存值，刷新並恢復它們。本地存儲解決方案也可以起作用，儘管一些堅定的政策禁止將其用於數據隱私原因。 – Matt

15

我修改了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>

來源

2015-09-29 00:38:25

+1

好主意！ **會話結束時會清除** N.B。** sessionStorage，而localStorage則無限期地保留。思考數據隱私時要考慮的事情。 – Matt

2

由於一些答案提到，localStorage是一個不錯的選擇，你當然可以自己做，但如果你正在尋找一個拋光的選項時，已經在GitHub上，這是否叫garlic.js項目。

來源

2015-09-29 00:49:46 nickytonline

相關問題

 相關問題