Recently when collaborating on a project with some students at Lighthouse Labs, I was asked to help debug a script that would save form values between page loads, so that the user wouldn’t have to re-populate the form. This piqued my interest, and so the sleeves were both literally and metaphorically rolled up so as to dive in and help with this project.

A lot of the original efforts that had been done following some of the best principles demonstrated in Addy Osmani’s wonderful basket.js script. The idea there being that it was possible to store values in localStorage and retrieve them later, though his script is more about storing scripts locally. And I looked on the jQuery plugin site, and discovered that there were already a number of plugins to do this. However, the purpose of Lighthouse is learning to code, so the mentorship began.

The result is a plugin called jQuery Elephant, which utilizes localStorage to store form values so that forms do not have to be re-populated. Why Elephant? Well, elephants never forget, of course!

There were a few concepts that needed to be communicated here in order to make the plugin successful. One of the main ones was that we had to find a way to constructively serialize the form data, no matter what kind it was. To that end, input boxes, selects, checkboxes, radio buttons, and textareas all had to be considered as possible sources of information.

Additionally, there needed to be a standard format in which to store them, and since we were dealing with JS and jQuery already, then JSON became the obvious choice. As well, this was an excellent opportunity to teach about closures and how they can keep a namespace clean from outside influence.

And, of course, there was the tutorial on how localStorage worked. Once this was put together, it was a pretty decent plugin, so I have put it up here.

Published 24 Jul 2014

Writing better code by building better JavaScript
Don Burks on Twitter