jQuery Plugin For Form State Auto Save/Restore with Html5 sessionStorage - Squirrel.js

File Size: 17.4 KB
Views Total: 5768
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Form State Auto Save/Restore with Html5 sessionStorage - Squirrel.js

Squirrel.js is a simple yet useful jQuery plugin that automatically and temporarily stores the information from the form as you type in fields or change values, until the form is submitted.

The plugin uses HTML5 sessionStorage for the current form state in case you refresh the browser or navigate away and return.

You might also like:

How to use it:

1. Load the jQuery library and squirrel.js script at the end of the Html page.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script src="jquery.squirrel.min.js"></script> 

2. Enable the plugin on an Html form by just adding a CSS class name of 'squirrel' to it. The plugin will do the rest.

<form action="/" method="post" class="squirrel">
</form>

3. Some default options for Squirrel.js.

clear_on_submit: true,
storage_method: 'session',
storage_key: 'squirrel',
storage_key_prefix: ''

Change logs:

2016-01-08

  • Using jQuery's trim and tidied code

2015-08-21

  • v0.1.8
  • Added storage_key_prefix prefix and added sanitize option strings
  • Onload function in correct scope
  • Trim whitespace whilst checking isString

2015-07-26

  • Check if the storage_method is a string
  • Using on() instead of the event aliases
  • Removed converting action to lowercase

2015-07-24

  • Moved section that checks if the storage property is valid

2015-07-23

  • Reduced code by caching the storage property

2015-07-21

  • v0.1.6
  • Added $.each() loop back into select logic to allow multiple options being selected. 

2014-11-20

  • Added support for localStorage as a configuration option.
  • Add support for all HTML5 input types - color, date, datetime, datetime-local, month, week, time, range, search, tel, and URL.

2014-11-19

  • Configured to also include input type='email' fields (added a test field to index file and styled those input types as well for the demo).

2014-05-19

  • Added action parameter in front of the options parameter. This will change things a little going forward, but most default configurations will still work. 
  • Adding comments, moving stash and unstash functions out of the loop so they're only defined once.

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