Over four months ago, I posted on how to use the HTML5 localstorage API to protect forms. Quite curiously, it was five days before someone else wrote an article on the concept on Smashing Magazine. (I won’t link to it because I’m still a little bitter). Despite my initial bitterness, I’ll admit that Alexandar Kaupanin’s plugin ultimately delivers a different utility to its users; so I still feel compelled to take the next step and turn the Forminator T100 into a proper jQuery plugin.

Some Basic Details

The Name

Unlike some other devs who feel the need to name their plugins after kings in Greek mythology whose names are strikingly similar to diseases you learn about in health class, this plugin is simply titled the Forminator T100 series. Your data is John Connor, the forminator will protect it at all costs.

Usage

Get forminator.js somewhere in the footer on your page. After that, you have two required arguments: savedItem, storageKey. SavedItem just tells the plugin which form fields you want to be recoverable (this means you can avoid the scary prospect of saving passwords). storageKey is where you tell me what the unique identifier is for the input field. You just need to identify that as ID, name, or whatever else you want.

So basically, if you wanted to save every input and textarea field, and each one of those fields has a name attribute, it’s this simple:

$('#thisForm').('input', 'name');

The one other thing I added was an optional third argument where you can identify the button that a user clicks which would clear out storage. I’d expect that to be a submit button or something where the user’s actions are finished – and it’s no longer necessary to recover the data.

Fork Me All Night Long

It’s up on Github, so feel free to improve on it however you’d like.

And, of course, feel free to play with it on JSFiddle, too: