How to keep input data after browser back using keep-alive in vuejs?

user_15373337 0
Viewed 90

I am a newbie to VueJs

I would like to use Vue2 to create a validation form

Index.html

<div id="app">
   <form action='process.php' method="post" name="submit_form" id="submit_form" v-on:submit="validateForm">
      <label for="username">Name</label>
      <input  type="text" name="username" v-model="username" placeholder="Username"/>
       <br><br>
       <input class="submit_button" name="submit_form" type="submit" value="Submit">
    </form>
 </div>

but When I click the previous or next page, then back to index.html form page. The input field's data is auto-remove.

How to using keep-alive in vuejs to save user input?

Is there any simple example?

Thank you very much

vue.js keep-alive
1 Answers

When you click on the previous or next page (I think you mean the browser's arrows) the page it's reloaded, so the javascript (and vue) too. To keep the data, you must "save" the form's state. A simple solution can be to save the form object in sessionStorage and check if there is a sessionStorage Item (let's say with a key 'formData') and fill the form object with these values.

Example:

<html>
  ...
  <body>
     <div id="app">
       <form action='process.php' method="post" name="submit_form" id="submit_form" v-on:submit="validateForm" v-on:change="saveFormDataState">
          <label for="username">Name</label>
          <input type="text" name="username" v-model="formData.username" placeholder="Username"/>
          <br><br>
          <input class="submit_button" name="submit_form" type="submit" value="Submit">
      </form>
 </div>

  <script>
     new Vue({
       el: '#app',
       data: () => ({
         formData: {
           username: ''
         }
       }),
       methods: {
         initFormDataState(){
           const formData = JSON.parse(sessionStorage.getItem('formData') || '');
           if(formData){
             this.formData = formData;
           }
         },
         saveFormDataState(){
           const formData = JSON.stringify(this.formData);
           sessionStorage.setItem('formData', formData);
         }
       },

       created(){
         this.initFormDataState();
       }
     });
  </script>
     
  </body>
</html>

Note that I have added the on-change listener to the form to save the form's state when the user focuses on another input element or presses the submit button.

user_145911090
Related