Gmail-like client-side drafts: Sisyphus.js

Every website has its own complex form or a big comment form or any other form that requires special user attention. But, sometimes user’s browser crashes or the user accidentally closes the current tab and looses all the information that he wrote in the form. To eliminate this problem and keep the user happy and continue submitting the form you need a plugin or library that can save the information locally.

Using Sisyphus on your website the user just needs to reopen or refresh the specific page and all the changes that he wrote in the form/comment area/etc will be there. This jQuery plugin is lightweight (3.5 KB) and uses Local Storage to prevent users work from being lost. Keep in mind that this works only on modern browsers that have HTML5 support. To make the plugin work you just need to put the following JavaScript snippet in your page (include the plugin and jQuery also, of-course).

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

There are a couple of options with default value like customKeyPrefix, timeout, onSave, onRestore, excludeFields, etc (more on this on plugins page) that you can overwrite anytime to make the plugin work for your specific project. You can make the plugin auto-save each field on a specific given time (see example bellow).

$('form').sisyphus({timeout: 5});

Gmail-like client-side drafts: Preview

Gmail-like client-side drafts

Download jQuery Plugin/Documentation/Examples

Leave a Reply