Browser

Use sessionStorage for quick form storage

Rather than having lines of code on the back-end reserving form data, a couple of lines of JavaScript can make life easier.

When working with a web scripting language like PHP, few things are as tiresome as parsing in form elements, only to have to spit them back out when validation fails. And then there is the additional problem of making sure you sanitise the values correctly so that the user sees back what they typed in and having to handle quotes correctly.

It's a pain and at some point will trip up the unsuspecting developer, so let's avoid it as much as possible.

The tool that will help us out of this bind will be sessionStorage, a window-level object that is supported from IE8+ and in Firefox, Chrome, Opera et al. All the gory details for Web Storage are on w3.org.

All we need to know in this case is that the sessionStorage has a setItem('key', 'value') setter and a getItem('key') getter method. There are other methods that go beyond this example: clear() and removeItem('key') methods as well as the storage event.

The following code listing simply loops over the input and select elements in a form and sets their value in sessionStorage with a key that is the element's name attribute:

<html>

<body>

<script>

function saveForm() {

//nothing to work with, get out of here

if(typeof window.sessionStorage ==="undefined"){return;}

saveValues("input");

saveValues("select");

return true;

}

function loadForm() {

//nothing to work with, get out of here

if(typeof window.sessionStorage ==="undefined"){return;}

setValues("input");

setValues("select");

}

function saveValues(tag){

var inputs=document.getElementsByTagName(tag);

for(var i=0;i<inputs.length;i++){

window.sessionStorage.setItem(inputs[i].name, inputs[i].value);

}

}

function setValues(tag){

var inputs=document.getElementsByTagName(tag);

for(var i=0;i<inputs.length;i++){

inputs[i].value = window.sessionStorage.getItem(inputs[i].name);

}

}

</script>

<style>label{width:7em;display:inline-block;}</style>

<h1>The form</h1>

<form method="post">

<label for="firstname">First name:</label><input type="text" name="firstname"/><br/>

<label for="lastname">Last name:</label><input type="text" name="lastname"/><br/>

<label for="address">Address:</label><input type="text" name="address"/><br/>

<label for="city">City:</label><input type="text" name="city"/><br/>

<label for="postcode">Postcode:</label><input type="text" name="postcode"/><br/>

<label for="country">Country:</label><input type="text" name="country"/><br/>

<label for="combo">Combo:</label><select name="combo"><option value="a">Option A</option><option value="b">Option B</option></select><br/>

<button onclick="return saveForm()">Submit</button>

</form>

<script>loadForm()</script>

</body>

</html>

Because we are working without a framework like jQuery, which has a more powerful selection engine than getElementsByTagName, we must loop over each tag we are after to get and set them. Similarly with the use of a framework we could also expand and narrow the elements we wish to store and load with greater precision.

On the back-end we will still need to test for valid inputs, but at the very least we have done away with lines of value={$the_value} that haunt template code throughout the web.

sessionStorage will work for the browser session; if you need longer-term storage, you can use the localStorage object that has the same methods as sessionStorage.

If at any time you'd like to view the contents of sessionStorage, a console.log(window.sessionStorage) line in a modern browser will show you what is being stored.

About

Some would say that it is a long way from software engineering to journalism, others would correctly argue that it is a mere 10 metres according to the floor plan.During his first five years with CBS Interactive, Chris started his journalistic advent...

0 comments

Editor's Picks