rikrikrik.com

jQuery autosave plug-in

What it does
Examples
Usage
Options
Download

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
onAfterSave: A function to be called after saving.; takes a function
onBeforeRestore: A function to be called before restoring.; takes a function
onAfterRestore: A function to be called after restoring.; takes a function
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.