Save And Restore Form Values With jQuery - savy.js

Save And Restore Form Values With jQuery - savy.js
File Size: 4.51 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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

Changelog:

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.