Garlic.Js and Sisyphus.Js: These jQuery Plugins Store Form Values With HTML5 LocalStorage

The problem is as old as forms on the web are. The longer the form, the bigger the problem, potentially. The problem I'm talking about is one you have encountered more than once in your digital lifetime. It uses to occur only after filling out the most complex forms or while you are in a hurry and just wanted to submit this order you promised your wife to place today. There it is. Submission fails, the browser tab closes accidentally, for some reason you press F5 or whatever monkey business you achieve to perform. Result: the form is empty again, you are back to zero. The plugins for jQuery we have for you today, promise to avoid running into a situation like this ever again. Image by jacqueline macou from Pixabay

Garlic.js and Sisyphus.js: Save The Content Of Your Form To LocalStorage

If you run an ecommerce site you are aware of the problem. If potential customers have to fill in forms over and over again they will more likely than not lose their desire to buy. In other words: They will leave their shopping carts right in the middle of your warehouse and head for the door. This effect is not limited to shoppers, of course. Every net citizen will have encountered the effect of having to fill in this large form yet again, I know I had to dozens of times. It is not always due to the disability of your fingers. Web designers have their fair share too. Garlic.js and Sisyphus.js, two relatively fresh plugins for jQuery promise to be the solution. While Sisyphus.js is the older and more mature project, Garlic.js sees a lot of attention these days, as it is brand-new and backed by an ambitious developer open to suggestions and discussions in general. The operating principle of both plugins is identical. Both need a modern browser at the client side, as they make use of HTML5's localStorage API, this little technique that allows you to store web contents locally on your drive. Fallbacks or ports for less modern browsers are not implemented. You would have to code them on your own. A useful approach for IE 6/7 can be found in the related links to this article. Basic usage is simple with both plugins. After having embedded the script in the head of your HTML - don't forget jQuery itself, by the way - you put it into effect like this: Garlic.js:

The data attribute has to be attached to each form you want to have the values stored by Garlic. If you have more than one form on a single page, you have to attach the attribute to each one individually. Sisyphus.js works using a function call, not the data attribute kind:

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

As you easily recognize, Sisyphus lets you specify multiple forms in one single function call. If you want to cover all forms on the page, the call is simpler:

$('form').sisyphus();

Sisyphus offers more options for customization than Garlic does. With Sisyphus you can even call functions dependant on the different states of your form fields. Sisyphus delivers more functionality by far Don't be too quick to dismiss Garlic for Sisyphus though. Garlic's developer Guillaume Potier promises to grow its functionality quickly. The approach of controlling the plugin through the use of data attributes may sound appealing to some ears, I know it does to mine. After submitting the form or intentionally resetting it, all values get discarded from localStorage as they are no longer needed. During my tests values only got stored when I left the fields using the tab key, clicking around the form with a mouse did not result in having any value stored. As you always need potential for optimization I take this as intended ;-) Who wants perfection right from the start anyway?

Related Links:

• Documentation for Garlic.Js - Garlicjs.org
• Translating localStorage to UserData (IE-proprietary) - Github