Persist Form Data Using HTML5 Local/Session Storage - Persist.js

Persist.js is a lightweight jQuery plugin that saves data from an HTML form with HTML5 local storage (or session storage) and restores the form to it's previous state when needed.

The plugin can be used to prevent data loss in your HTML form when the webpage is accidentally closed, reloaded or navigated away.

Supports any form fields such as text field, select box, checkbox, radio button and more.

How to use it:

1. Import jQuery JavaScript library and the jQuery Persist.js plugin into the document.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery-persist.js"></script>

2. Call the function on your form fields and done.

$(function(){

  $('input,select,textarea').persist();

});

3. Set the context or namespace for each field.

$('input,select,textarea').persist({
  
  context : 'def'
  
});

4. Set the variable basename.

$('input,select,textarea').persist({
  
  basename : 'jqpersist'
  
});

5. Whether or not to replace existing field contents if any.

$('input,select,textarea').persist({
  
  replace : true
  
});

6. Whether or not to use Session Storage instead of Local Storage

$('input,select,textarea').persist({
  
  session : false
  
});

---

This awesome jQuery plugin is developed by commonpike. For more Advanced Usages, please check the demo page or visit the official website.