Save And Restore Form Values With jQuery - savy.js

savy.js is an ultra-light (less than 1kb) jQuery plugin that automatically saves form values in the client side (using HTML5 localStorage) and restore them on your next visit. A great solution to preventing data loss in case the browser is refreshed or the page is suddenly closed.

1. Include the JavaScript file savy.js after jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="savy.js"></script>

2. Add the CSS class auto-save to the form fields. The plugin currently supports input field and textarea elements.

<form>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="auto-save form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="auto-save form-control" id="pwd">
  </div>
  <div class="form-group">
    <label for="pwd">Review:</label>
    <textarea class=" auto-saveform-control" id="review"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

3. Attach the plugin to the form fields and done.

$('.auto-save').savy('load');

4. To destroy the plugin and remove the saved values from your local storage, follow this step:

$('.auto-save').savy('destroy');

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