What is the problem?

Have you ever had cases when during a long filling of a tedious form or writing an eloquent and ardent comment * suddenly * the browser crashed? Or did you close the tab in which you work, or the power supply was turned off (and there is no UPS, by a certain law)? If not, then you are lucky, but no one has insurance against such incidents.



Imagine a storm of emotions experienced by a user who has just lost all input data - and in fact it remains to reprint a little and send the form. If only there was a way to recover this data, and not to do Sisyphean labor ...





This applies, by the way, even to writing posts on a forum and articles on Habr. The practice of typing long texts in text files with periodic preservation, and subsequent copy-paste to a resource, is quite common. You can regularly save drafts, but not all forums provide such an opportunity, and not very convenient to do. The best thing about Google is autosave drafts - write yourself, all the information is saved and you don’t need to poke buttons on buttons.

')

What to do?

Implementing the preservation of drafts like Google’s is a more difficult task and not at all a universal method. I wanted the solution to be simple and reusable, which in this case excludes witchcraft over the server part.



As a result, a simple whistle was written that can store the data entered into the form in the browser's Local Storage and, when reloading the same page (query params matter), fill in the form with them. The data of a specific form in Local Storage is cleaned when it is sent or reset.

How to use?

The plugin has only one purpose, so using it is quite simple: you just need to select the forms whose data we want to save and restore.

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

Update:

Added the ability to set an additional prefix to keys for storage in Local Storage; timeout for saving text field data (input: text and textarea), callback to save, restore and reset form data.

The default options are:

 { customKeyPrefix: '', timeout: 0, //  ,  0 -     onSaveCallback: function() {}, onRestoreCallback: function() {}, onReleaseDataCallback: function() {} } 

Save text fields every 5 seconds (select / radio buttons / checkboxes are still saved with each change):

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

Update 2:

Added support for IE 8+.



Demo , source .