如何重新加载当前页面而不会丢失任何表单数据？
我可以重新加载当前页面而不会丢失任何表单数据？ 我用了..
window.location = window.location.href; 和
window.location.reload(true);
但是这两件事情不能为我提供更早的forms数据。 哪里不对 ？ 当手动刷新浏览器时，它是好的（我不会丢失任何表单数据）。 请指导我如何弄清楚。
这是我的完整代码
<div class="form-actions"> <form> <table cellpadding = "5" cellspacing ="10"> <tr class="control-group"> <td style="width: 100px;"> <div>Name: <font color="red">(*)</font></div> </td> <td> <input type="text" id="inputName" placeholder="Name" required> </td> </tr> <tr class="control-group"> <td> <div>Email: <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: </div> </td> <td> <input type="text" id="inputPhone" placeholder="phone number"> </td> </tr> <tr class="control-group"> <td> <div>Subject: <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: </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"); });}
您可以使用各种本地存储机制将此数据存储在浏览器中，例如Web存储，IndexedDB，WebSQL（不build议使用）和File API（不build议使用，仅在Chrome中可用）（以及带有IE的UserData）。
最简单和最广泛的支持是WebStorage，在您closures浏览器之前，您拥有内存中的持久性存储（ 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()); // ... }
networking存储同步工作，所以这可能在这里工作。 或者，您可以将每个模糊事件的数据存储在input数据的元素上。
在页面加载时，您可以检查：
window.onload = function() { var name = localStorage.getItem(name); if (name !== null) $('#inputName').val(name); // ... }
如果数据不存在， getItem将返回null 。
如果您只想存储临时文件，请使用sessionStorage而不是localStorage 。
我修改了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>
在GitHub上find这个。 专门为它创build的。
这个答案对我来说是非常有帮助的，并且省去了手动查看每个字段的麻烦：
使用jQuery来存储复杂表单的状态
window.location.reload() // without passing true as argument
为我工作。
我通常会自动将我自己的表单提交给服务器，并用充满的参数重新加载页面。 将占位符参数replace为您的服务器收到的参数。
你必须提交数据和重新加载页面（服务器端渲染forms与数据），只是重新加载将不会保存数据。 这只是你的浏览器可能是手动刷新caching表单数据（不同浏览器）。
同意HTML5 LocaStorage。 这是示例代码
您可以使用localStorage（ http://www.w3schools.com/html/html5_webstorage.asp ）在刷新页面之前保存值。
正如有些答案中提到的， localStorage是一个不错的select，你当然可以自己做，但是如果你正在寻找一个优化的选项，GitHub上已经有一个叫做garlic.js的项目 。
