Learning jQuery

Just imagine that you're filling a long form on any site And when you're almost done with that browser is crashed, or you closed browser accidently, or electricity is turned off, or something else break your efforts. How would you feel? Horrible? You would be getting angry as all your inputs are gone. You would be thinking if there was a way to recover your data which you just filled.

There is another scneario which I think you all have noticed if you are using gmail. When you typing your email, your email gets saved automatically in drafts folder without pressing any button. Well, having a system like Gmail will not be as easy but there is a way to recover your data which you have filled in the form.

The solution is Sisyphus.js

This small js file stores the data to the local storage of the 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. It is using the HTML 5 features called localStorage.

What is localStorage object

Data stored using the localStorage object is persisted until it is specifically removed via JavaScript or the user clears the browser’s cache. Data stored in the localStorage object is accessible only from the domain that initially stored the data.

Integrating sisyphus with your website is pretty simple.

If you want to protect specific form

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

If you want to protect all the forms in your page

$('form').sisyphus();

Following options are available and also customizable.

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

customKeyPrefix is an addition to key in Local Storage to store form fields values

timeout is an interval in seconds to perform saving data. If 0 - save every time field is updated.

onSave is function fired each time data are saved to Local Storage

onRestore is function fired if form's data are restored from Local Storage. Unlike onSaveCallback it's common for whole form, not for each field

onRelease is function fired when Local Storage is freed of previously stored form data

excludeFields is selector to exclude specified fields from observing, ex: $( "textarea, :text" )

For example, following code will force Sisyphus to save each text field value every 5 seconds:

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

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

Browser support

• Chrome 4+
• Firefox 3.5+
• Opera 10.5+
• Safari 4+
• IE 8+

Note: That it doesn't share the information across the browser as it stores in local storage of the particular browser. For example, you were visiting the site in Chrome and after filling some information the browser gets crashed. Now if you open the same site in chrome then you will find your data but if you open it in IE or mozilla then you will not find your data.

Feel free to contact me for any help related to jQuery, I will gladly help you.