Wednesday, December 7, 2011

Auto-Save User’s Input In Your Forms With HTML5 and Sisyphus.js

What Problem Needs Solving?

Have you ever been filling out a long form online or writing an
eloquent and spirited comment when suddenly the browser crashes? Or
perhaps you closed the browser tab accidentally, or your Internet
connection cuts off, or the electricity goes down (and, being ever
obedient to Murphy’s Law, you had no backup power supply). If not, then
you’re lucky. But no one is protected from such minor catastrophes.(Image: Kristian Bjornard)
Imagine the storm of emotions felt by a user who had to add just a
bit more information before submitting a form and then loses all data.
Horrible, huh? Now, if only there was a way to recover that data, rather
than undertake a Sisyphean pursuit.

Existing Solutions

One common solution is to write one’s comments in a local document,
saving the file periodically, and then copying and pasting the text into
the form once it’s complete. Some forms also allow you to save your
draft by clicking a button, but not all forms have this feature, and
it’s not the most convenient solution. The product that does this best
is Gmail, with its auto-save feature for drafts: just type away, and all
of the content is stored automatically, without you even needing to
press a button.
After releasing Sisyphus.js, I learned of Lazarus, an extension for
Firefox and Chrome that helps to recover form data. But browser plugins
lead to an even bigger problem: distribution. Some users don’t have a
clue what a browser extension is — many users don’t, in fact, which
makes this approach inadequate on a large scale.
The people with a direct line to users are Web developers themselves.
So, addressing the problem of user input at the stage of development
seems more practical than expecting users to add to their skyscraper of
extensions.

A Solution: Sisyphus.js

Implementing Gmail-like auto-saving of drafts is not straightforward
at all. I wanted the solution to be simple and easy to use, which would
rule out the use of server-side magic.
The result is an unassuming script that stores form data to the local
storage of the user’s browser and restores it when the user reloads or
reopens the page or opens the page in a new tab. The data is cleared
from local storage when the user submits or resets the form.

How to Use It

Implementing Sisyphus.js is pretty simple. Just select which forms you’d like to protect:

1

$('#form1, #form2').sisyphus();

Or protect all forms on the page:

1

$('form').sisyphus();

The following values are the defaults but are customizable:

1

{

2

customKeyPrefix: '',

3

timeout: 0,

4

onSave: function() {},

5

onRestore: function() {},

6

onRelease: function() {}

7

}

Let’s break these options down:

customKeyPrefix
An addition to key in local storage details in order to store the values of form fields.

timeout
The interval, in seconds, after which to save data. If set to 0, it will save every time a field is updated.

onSave
A function that fires every time data is saved to local storage.

onRestore
A function that fires when a form’s data is restored from local storage. Unlike onSaveCallback, it applies to the whole form, not individual fields.

onRelease
A function that fires when local storage is cleared of stored data.

Even after Sisyphus.js has been implemented in a form, you can apply
it to any other form and the script won’t create redundant instances,
and it will use the same options. For example: