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

Advertisement

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 PrefixFree1; the second introduced Foundation2, a responsive framework that helps you build prototypes and production code. This time, we’re 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 Murphy’s Law, you had no backup power supply). If not, then you’re lucky. But no one is protected from such minor catastrophes.

screenshot3
(Image: Kristian Bjornard4)

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 Sisyphean5 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:

$('#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() {}
}

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:

// 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} );

…

// Or
sisyphus.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 demo6 are hosted on GitHub; the minified version is about 3.5 KB. A road map7 and issue tracker8 are also available.

(al)

↑ Back to topShare on Twitter

Fitness addict, tv series junkie, passionate web developer. Likes bench press, is sensitive to tenderness and mom's pies. Crazy about wombats. Lazy.

  1. 1

    Great timing! I literally was about to write an ajax-based approach to solve this issue… but then you wrote this article. The one possible issues I see with this approach is:
    Since it’s simply local storage (and not server-side), the data is lost if the user goes to another computer (or possibly even if they’re at a lab somewhere and the computer has to be restarted).
    In any manner though, thanks for sharing!

    0
  2. 2

    Demo doesn’t work!

    0
    • 3

      Yep, not working here either.

      0
    • 4

      Just tried at work. It works now but it’s very tempremental. It doesn’t always save the data, there is definite loss of information sometimes.

      So for me until this is rock solid it’s not something we can use in real world projects, it’s a bit too buggy.

      0
  3. 5

    Works great for me (Chrome).
    Thanks for sharing!

    0
  4. 6

    I have a question:

    Why did not Firefox prompted me if i allow the site to store data?

    0
    • 7

      It isn’t using indexDB. HTML5 localStorage & sessionStorage will not prompt prior to storing just like the depreciated cookies.

      0
  5. 8

    Nice article.Thank you for sharing.

    0
  6. 9

    Nice Article and interesting solution.
    Does this also work with wysiwyg items like TinyMce ?

    0
  7. 11
  8. 12

    Awesome!!
    This is going to save me hours upon hours of very tedious work. Cheers!

    On a side note, is anyone else a little jealous that the author of this article is a brilliant web developer and has chiseled abs at the same time?!

    0
  9. 13

    I would have to look at the code but this is a rather elegant solution at face value. I’m wondering why it sits on top of jquery too. Using local storage is a pretty simple task along with traversing forms. Anyway, still a simple solution.

    0
  10. 14

    It sounds like an STD. Can’t take any script with a name like that seriously.

    0
  11. 15

    From a security perspective, I’m a bit hesitant to use it because users on a publicly-accessible computer might just get their information stolen, one way or another. Perhaps an additional feature is to incorporate some sort of one-way cryptography, or clear the local storage on session end or session timeout. Just a thought.

    0
    • 16

      Simply make sure to use the ‘excludeFields’ option for fields which may contain sensitive information, That said, I’d highly recommend that anybody who is worried about their sensitive information being used, not to type it into a publicly-accessible computer.

      Also, @Chris Harrison – Good job looking like an illiterate tool!

      0
    • 17

      Probably no good idea to use one-way cryptography. The whole idea is to be able to retrieve the data back again…

      0
  12. 18

    lazy mutch? :-)

    0
  13. 19

    @Chris Harrison – Look up Sisyphus and you won’t make that illiterate comment again.

    @mimik – Learn to spell.

    @Ron – You’re right. Cool code but a big security risk.

    0
  14. 20

    1. jQuery’s plugins page is closed now but there have been a few attempts to do the very same thing by others.

    2. Also it’s worth mentioning that browsers have local storage limitations.

    0
  15. 21

    Nice article!

    I think the best way of using this is to combine it with a server side script that will save the data in a database online, of course using the “onSave” event.

    onSave: the data can be sent to the server via ajax as json, then onRestore if the local storage fails to retrieve the data, the data can be fetched from server.

    This is how i’ve been using it, especially for 5-6 pages school application forms.

    0
  16. 22

    Edmilson Britto de Almeida

    March 15, 2012 9:57 am

    I was looking for a script that provides this type of option for an item in a menu when clicked and was saved after a refreshing return to the menu item that was clicked and selected open, thanks for sharing!

    Estava procurando um script que fornecesse este tipo de opção para que um item de um menu fosse salvo quando clicado e apos um refresh retornasse com o item do menu que foi clicado aberto e selecionado, obrigado por compartilhar!

    0
  17. 23

    Catalin Cimpanu

    March 20, 2012 1:40 am

    I am very familiar with your library. Never used it, but looking forward to for quite some time.
    Nice job!

    0
  18. 24

    The sad thing with Sisyphus is that it will not work well with CodeMirror or Ace.

    But I love how simple it is to use.

    0
  19. 25

    Is there app for firefox? Can i download this addons?

    0
  20. 26

    When following this design pattern, do you make the server side syncing a result of an active user action such as a traditional Save button?

    0
  21. 27

    This is exactly what i was looking for!!! but i don’t really now how to use it…

    Basically i tried putting:

    $(function(){
    $(‘form’).sisyphus({timeout: 0});
    });

    on the head section, hoping that it’ld do the trick.. it didn’t :(

    What am i doing wrong here?

    Thanks!

    0
  22. 28

    Would this work on a form on a mobile device? I want to create a mobile website form and have the data auto save — so that if they get a phone call, the phone crashes, etc. that they can pick up where they left off when they return to the mobile site.

    0
  23. 29

    This plugin works just perfectly! It has saved me many hours of work. Thanks!

    0
  24. 30

    I am using sisyphus in my tabs and it works great on tab navigation.I have a question regarding preserving dynamically added new row to the table. It works gr8 on individual form fields and table mass data change also.But just wondering how do we preserve data on dynamically adding new row value to the table and deleting the row on the table.

    Say for example , My table displays 5 rows from the server in a table and on button click i add a new row(6th) to the table and I fill the row with values.At this point I want to preserve the row value on local storage..I have assigned id and name dynamically for those newly added rows…Please throw some light how to preserve dynamic row data on page navigation or refresh

    0
  25. 31

    Tried this several times and it just doesn’t work. The demo online works perfect though, but to look at the source is messy. What I’m doing wrong?

    $(‘form’).sisyphus();

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top