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.

Supports text fields, select boxes, checkboxes and radio buttons.

How to use it:

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');

5. Event handlers.

$('.auto-save').savy('load',function(){
 console.log("All data from savy are loaded");
});

$('.auto-save').savy('destroy',function(){
 console.log("All data from savy are destroyed");
});

Changelog:

2020-06-27

• Add support for inputs filled with browser's Autocomplete

2019-08-07

• Add Support for saving Selected Value in select option

2017-12-29

• Bugfix

2017-11-30

• Support for radio and checkbox

---

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