SoftwareSpot Apps edited this page Aug 1, 2015 · 25 revisions

Getting Started with Squirrel.js

To get started, simply include the plugin after your jQuery library is loaded, and add a class of squirrel to your form. The plugin does its own bindings for that class, otherwise you can set it up to target your forms using the code below:

$('.my-form').squirrel();

Additionally, you may simply specify a data-squirrel attribute to your form with its value set to your desired storage_key value. This way, you can have several forms with the same input names, and they'll be stored separately in local/sessionStorage.

By default the plugin will bind an element based on the name attribute the element, though if a name attribute doesn't exist it will use the id attribute instead. If neither these attributes exist then the element is not stored.

View the Demo


Plugin Options

Squirrel.js takes two parameters, and there are currently three options available for customization. The first parameter is an action, it should be either init or clear. If it's neither of those, the plugin defaults to init. The second parameter is a JSON object containing the plugin options.

$('.my-form').squirrel( 'init', {
  clear_on_submit: true,
  storage_method: 'session',
  storage_key: 'squirrel'
});

Here are a few details on the plugin options.

clear_on_submit

Boolean, set to true by default. Instructs the plugin whether or not to clear the sessionStore on submit. Useful if you're trying to have it remember form values from multiple pages, and then clear all at once on the final step.

storage_method

Set to either session or local to select the storage method you'd like to use (sessionStorage or localStorage). By default, the plugin uses session - hence the data clearing when the browser window closes. Set to local if you'd like data to persist through browser restarts.

storage_key

Defaults to squirrel. Used as the key for the sessionStorage item that's created to store all the values from all squirrel forms. Change this if you'd like to set the key to be something specific, or if by some awesome chance you already have a sessionStorage item called 'squirrel' (which, if that's the case, well done, I'm happy to get outta your namespace :smile:)


Manually Clear Storage

You can manually clear the stores using the code snippet below. If you've changed the storage_key or storage_method options in your implementation, you'll have to make sure you pass the same key into this one, or your object won't be cleared correctly.

$('.my-form').squirrel( 'clear', [options] )

Stop Monitoring

You can stop monitoring a form using the code snippet below. This will close all events that are bound to a form, therefore the plugin will stop saving values. To restart, simply initialize the plugin again for the form.

Stop

$('.my-form').squirrel( 'stop' )

Start

$('.my-form').squirrel( )

Notes

  • Ignore a field by simply add a class of squirrel-ignore - the plugin won't save any values that are typed into that field.

Contributing

Feel free to post an issue or submit a pull request if you find a bug or think things should be different. I'm very open to suggestions and contributions. :smile:

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.