How to reload current page without losing any form data

Question

Can I reload current page without losing any form data  I used    window location   window location href    and   window location reload true     But these two things can t get earlier form datas for me  What is wrong   When refresh browser manually  it is fine  I don t lose any form data    Please guide me how to figure it out   Here is my full code      lt div class  form-actions  gt           lt form gt               lt table cellpadding    5  cellspacing   10  gt                   lt tr class  control-group  gt                       lt td style  width  100px   gt                           lt div gt Name  amp nbsp  lt font color  red  gt     lt  font gt  lt  div gt                       lt  td gt                       lt td gt                           lt input type  text  id  inputName  placeholder  Name  required gt                       lt  td gt                   lt  tr gt                   lt tr class  control-group  gt                       lt td gt                           lt div gt Email  amp nbsp  lt font color  red  gt     lt  font gt  lt  div gt                       lt  td gt                       lt td gt                           lt input class  span3  placeholder  user gmail com  id   inputEmail  type  email  required gt                       lt  td gt                   lt  tr gt                   lt tr class  control-group  gt                       lt td gt                           lt div gt Phone  amp nbsp  lt  div gt                       lt  td gt                       lt td gt                           lt input type  text  id  inputPhone  placeholder  phone number  gt                       lt  td gt                   lt  tr gt                   lt tr class  control-group  gt                       lt td gt                           lt div gt Subject  amp nbsp  lt font color  red  gt     lt  font gt  lt  div gt                       lt  td gt                       lt td gt                           lt input type  text  id  inputSubject  placeholder  Subject  required gt                       lt  td gt                   lt  tr gt                   lt tr class  control-group  gt                       lt td colspan   2  gt                           lt div gt                               lt div gt Detail  amp nbsp  lt  div gt                               lt div class  controls  gt                                   lt textarea id  inputDetail  gt  lt  textarea gt                               lt  div gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td colspan  2  gt                       lt div gt                           lt label style  font-weight  bold   class  checkbox  gt   lt input id  confirmCheck  value    type  checkbox  gt                                  I Agree to the Personal information handling policy                          lt  label gt                       lt  div gt                       lt div id    alert placeholder  gt  lt  div gt                           lt div class  acceptment  gt                               Personal information handling policy  lt br gt   lt br gt                           lt  div gt                       lt  td gt                   lt  tr gt                   lt tr gt                       lt td colspan  2  gt                           lt div align  center  gt                               lt button id  btnConfirm  class  btn btn-primary  gt Confirm lt  button gt                               lt input type  reset  style  width  65px  height  27px   id  btnReset  class  btn  gt                           lt  div gt                       lt  td gt                   lt  tr gt               lt  table gt           lt  form gt       lt  div gt    And at my JS file    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   lt table cellpadding   8  class    submitInfo         html push   lt tr gt         html push   lt td class    title  gt Name  lt  div gt         html push   lt td class    value  gt    name    lt  td gt         html push   lt  tr gt          html push   lt tr gt         html push   lt td class    title  gt Email Address  lt  div gt         html push   lt td class    value  gt    email    lt  td gt         html push   lt  tr gt          if  phone trim   length  gt  0            html push   lt tr gt             html push   lt td class    title  gt Phone No  lt  div gt             html push   lt td class    value  gt    phone    lt  td gt             html push   lt  tr gt                html push   lt tr gt         html push   lt td class    title  gt Subject  lt  div gt         html push   lt td class    value  gt    subject    lt  td gt         html push   lt  tr gt          html push   lt tr gt         html push   lt td class    title  gt Detail Info  lt  div gt         html push   lt td class    value  gt    detail    lt  td gt         html push   lt  tr gt          html push   lt tr gt         html push   lt td colspan  2  gt  lt div align    center  gt         html push   lt button id  btnSend  class  btn btn-primary  style  width  65px   gt Send lt  button gt         html push   lt button id  btnReturn  class  btn btn-inverse  style  width  65px  height  27px  margin-left  5px   gt Return lt  button gt         html push   lt  div gt  lt  td gt  lt  tr gt          html push   lt  table gt             form-actions   append html join               btnReturn   click function e               HERE I WANT TO KNOW HOW TO DO                      btnSend   click function e            alert  Doom

User · Answer

Register an event listener for keyup event   document getElementById  input   addEventListener  keyup   function e     var someVarName   input value    sessionStorage setItem  someVarKey   someVarName     input value   sessionStorage getItem  someVarKey

User · Answer

I usually submit automatically my own form to the server and reload the page with filled arguments  Replace the placeholder arguments with the params your server received

User · Answer

I modified K3N s code to work for my purpose  and I added some comments to help others figure out how sessionStorage works     lt script gt         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            lt  script gt

User · Answer

You have to submit data and reload page  server side render form with data   just reloading will not preserve data  It is just your browser might be caching form data on manual refresh  not same across browsers

User · Answer

Agree with HTML5 LocaStorage  This is example code

User · Answer

Find this on GitHub  Specially created for it   https   gist github com zaus 4717416

User · Answer

window location reload      without passing true as argument   works for me

User · Answer

As some answers mention  localStorage is a good option and you can certainly do it yourself  but if you re looking for a polished option  there is already a project on GitHub that does this called garlic js

User · Answer

You can use a library I wrote  FormPersistence js which handles form  de serialization by saving values to local session storage  This approach is similar to that linked in another answer but it does not require jQuery and does not save plaintext passwords to web storage   let myForm   document getElementById  my-form   FormPersistence persist myForm  true    The optional second parameter of each FormPersistence function defines whether to use local storage  false  or session storage  true   In your case  session storage is likely more appropriate   The form data by default will be cleared from storage upon submission  unless you pass false as the third parameter  If you have special value handling functions  such as inserting an element  then you can pass those as the fourth parameter  See the repository for complete documentation

User · Answer

You can use various local storage mechanisms to store this data in the browser such as Web Storage  IndexedDB  WebSQL  deprecated  and File API  deprecated and only available in Chrome   and UserData with IE    The simplest and most widely supported is WebStorage where you have persistent storage  localStorage  or session based  sessionStorage  which is in memory until you close the browser  Both share the same API   You can for example  simplified  do something like this when the page is about to reload   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 Storage works synchronously so this may work here  Optionally you can store the data for each blur event on the elements where the data is entered   At page load you can check   window onload   function          var name   localStorage getItem  name        if  name     null      inputName   val  name                    getItem returns null if the data does not exist   Use sessionStorage instead of localStorage if you want to store only temporary

User · Answer

This answer was extremely helpful to me  and saves the trouble of going through each field manually   Using jQuery to store the state of a complicated form

User · Answer

You can use localStorage   http   www w3schools com html html5 webstorage asp   to save values before refreshing the page

[javascript] How to reload current page without losing any form data?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to jquery-ui