jQuery autosave version 1.0

What it does

Autosave is designed to save the progress of forms by saving the fields to cookies so you won't lose anything should anything go wrong

The plug-in saves the form fields at certain intervals (the default is every 10 seconds) and whenever you leave the page.

The plug-in was written with work-intensive forms in mind, such as a blog article writing form.

Examples

To try this example, fill in some of the form fields and leave the page – clicking here will do. When you come back, your precious work will have been lost as the form fields will be blank, but you can click the "Restore form" button to magically rescue your work.

Delete related cookies Saving...

The example uses following code:

$('form *').autosave();

Usage

$(form_fields).autosave(options);

As the plug-in will only work on certain elements, you can select all elements and the plug-in will still work, e.g. $('form#the_form *').autosave();

By default, the class for saving the form is "autosave", the restore class is "autosave_restore" and the remove all related cookies class is "autosave_removecookies". So if you attach the class "autosave" to any link or button, it will save automatically.

The "Saving" notifier will show on any "autosave_saving" class

The plug-in requires Klaus Hartl's jQuery Cookie plug-in to work.

Options

Here's an example of how to use options:

$('textarea').autosave({
  'interval': 20000,
  'unique': 'articleadd'
});

And here are the options:

autosave
The jQuery expression that will handle save triggers.
default: '.autosave'
restore
The jQuery expression that will handle restore triggers.
default: '.autosave_restore'
removeCookies
The jQuery expression that will handle triggers to remove all cookies related to the autosave plug-in.
default: '.autosave_removecookies'
saving
The jQuery expression that show when save is complete.
default: '.autosave_saving'
interval
The interval that autosave will save to cookies in milliseconds.
default: 10000
unique
If you're using autosave on multiple pages within one site, assign a unique string to differentiate between pages, e.g. on a blog add page, use something like 'blogaddpage'.
default: '', takes a string
onBeforeSave
A function to be called before saving.
takes a function, needs to return true to save
onAfterSave
A function to be called after saving.
takes a function
onBeforeRestore
A function to be called before restoring.
takes a function, needs to return true to restore
onAfterRestore
A function to be called after restoring.
takes a function
savingFn
A function to be called for saving animations.
default: function (e) { $(e).show().fadeTo(1000, 1).fadeOut(500); }
cookieCharMaxSize
The amount of characters for each cookie for text inputs and textareas. This isn't the maximum you can save per text input, the maximum is browser-dependent.
default: 2000
cookieExpiryLength
The length in days the cookie will last
default: 1

Download

The plug-in requires Klaus Hartl's jQuery Cookie plug-in to work.