JS Tutorial
- Overview
- Documents
Squirrel.js - Improve form usability with this tiny jQuery plugin that temporarily stores field values in HTML5 sessionStorage as users type.
Source: squirreljs.com
1. INCLUDE JS FILES
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="jquery.squirrel.min.js"></script>
2. HTML
Add a class of squirrel to your form.
<form action="/blah" method="post" class="squirrel"> <!-- any form fields you like :) --> </form>
3. JAVASCRIPT
Otherwise you can set it up to target your forms using the code below:
$(".my-form").squirrel();
4. OPTIONS
Squirrel.js takes two parameters, and there are currently two 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_key: "squirrel"
});
Here are a few details on the plugin options.
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.
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)
5. Manually Clear Storage
You can manually clear the stores using the code snippet below. If you've changed the storage_key option 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] )
