Sisyphus.js: Gmail-Like Client-Side Drafts, And A Bit More

Editors note: This article is the third in our new series that introduces new, useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework that helps you build prototypes and production code. This time, were presenting Sisyphus.js, a library developed by Alexander Kaupanin to provide Gmail-like client-side drafts and a bit more.

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 Murphys Law, you had no backup power supply). If not, then youre 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 ones comments in a local document, saving the file periodically, and then copying and pasting the text into the form once its complete. Some forms also allow you to save your draft by clicking a button, but not all forms have this feature, and its 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 dont have a clue what a browser extension is many users dont, 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 users 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 youd like to protect:

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

Or protect all forms on the page:

$('form').sisyphus();

The following values are the defaults but are customizable:

{customKeyPrefix: '',timeout: 0,onSave: function() {},onRestore: function() {},onRelease: function() {}}

Lets 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 forms 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 wont create redundant instances, and it will use the same options. For example:

// Save form1 data every 5 seconds$('#form1').sisyphus( {timeout: 5 } );// If you want to protect second form, too$('#form2').sisyphus( {timeout: 10} )// Now the data in both forms will be saved every 10 seconds

Of course, you can change options on the fly:

var sisyphus = $('#form1').sisyphus();// If you decide that saving by timeout would be better$.sisyphus().setOptions( {timeout: 15} );// Orsisyphus.setOptions( {timeout: 15} );

Usage Details

Requirements: Sisyphus.js requires jQuery version 1.2 or higher.

Browser support:

• Chrome 4+,
• Firefox 3.5+,
• Opera 10.5+,
• Safari 4+,
• IE 8+,
• It also works on Android 2.2 (both the native browser and Dolphin HD). Other mobile platforms have not been tested.

Download the script: Sisyphus.js and the demo are hosted on GitHub; the minified version is about 3.5 KB. A road map and issue tracker are also available.

(al)

Alexander Kaupanin for Smashing Magazine, 2011.