
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.
- Publication date: 16.11.2017
- Source