Development
Autosaving form data using Sisyphus
Do you remember the feeling you had last time when you were typing an elaborate comment on a blog-post and the net connection failed while trying to submit the comment? Or the browser crashed without giving you a warning and you had to type in the whole thing again?
Most of us have had this feeling at least once. Imagine you were filling out a complex registration form with dozens of input fields. And the server says you made a single mistake in one of the fields and now you have to type in the whole thing again starting from the very beginning.
If you own a site, you must always be thoughtful about the user experience. You don’t want to lose a user registration just because he had made a single mistake in one of the fields. Why cant form data get auto-filled when the user is returned back to the page? How thankful the user will be if he doesn’t have to type in the comment again for your blog post?
There is a solution
Sisyphus is a jQuery plugin that can help you with this problem. Although quite similar to the drafts feature in gmaill, the working of sisyphus is a bit different. Here the form data is stored locally, not in the server.
You might have heard about the localStorage feature implemented in HTML5. Sisyphus stores the form data into the user’s computer as localStorage. And the next time you open the page , all those fields are auto filled by the data from the localStorage. Isn’t it cool?
How to use it
Using sisyphus in your forms is as easy as
$('form').sisyphus();
This would protect all forms in the page. If you want to protect the data in a particular form only, you can pass in the id of the form like,
$('#form1).sisyphus();
You can also set the time interval within which the stored data gets periodically updated.
$('form').sisyphus({timeout:3});
There are a lot of other options also, which are customizable,
$('form').sisyphus({
customKeyPrefix: '',
timeout: 0,
onSave: function() {},
onRestore: function() {},
onRelease: function() {}
});
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.
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.
Where to Download
Sisyphus is hosted in github.
You can also see a live demo there.
Privacy Concerns
Although storing form data is a great time-saver for the user it also has an undesired side. Getting your private data saved on a public computer is not a good thing. So think twice before you put the save option on fields containing sensitive information. But beside that sisyphus is a great time saver for you and your site’s visitors.
Tagged HTML5, Internet Explorer 8, jQuery, localStorage, Sisyphus, web development, Web Storage
BreakfreeJuly 13, 2012 at 10:10 pm
This is quite a great article regarding data saving. Thanks for informing us about this amazing plug in which I find very helpful and cannot wait to try it out
ollierexxJuly 18, 2012 at 7:31 am
Wow that is so cool. I have wasted so much time when the request times out or i get a different kind of glitch. Is there any way you can install it on a windows PC for all websites?
ollierexxJuly 19, 2012 at 12:57 am
I found a firefox plugin that remembers all the text that you enter in ant field and it has saved me around 20 minutes already
Thanks again for the idea
Ollie
LauraJuly 19, 2012 at 8:30 pm
Hi olierexx,
Can I ask you where did you find that pluggin?
Thanks
dieselJuly 20, 2012 at 1:29 pm
Wow, I wish I would have found out about this little plugin when I was making my blogs. I just recently lost a 800 word post due to a bad connection. I’ll be installing this right away, thanks!
ohiotom76September 3, 2012 at 12:29 pm
I was just about to ask about privacy concerns until I got to the very end of that article. I’ve been seeing notifications about my comments being auto saved when participating in forums – but I was assuming it was being auto saved to the server the site is hosted on, not on the computer itself I am on. This is good to know, because I would refrain from participating on sites that have this if I was on, say a public library computer or a work computer.
KennyKSeptember 13, 2012 at 1:45 am
I’m a bit confused though. This only works when it’s installed on a website? Is there anything client-side that I can install on my laptop, that saves my text locally in case my browser stops.
What’s the name of the Firefox plugin ollierexx ?
PaladinOctober 3, 2012 at 5:39 am
Wow that is so cool. I have wasted so much time when the request times out or i get a different kind of glitch. Is there any way you can install it on a windows PC for all websites?
Paladin recently posted..Donator Usergroup Added!
majikstoneNovember 9, 2012 at 6:16 am
This feature could easily be implemented without HTML5 Local Storage if the form uses Ajax requests. Another possibility would be to use cookies, however that would waste bandwidth.
But I guess HTML5 is the best way to do it, after wall that’s why local storage was created, to store data that you plan to use on the client.