Home arrow HTML arrow Page 2 - Optimizing Web Form Autosavers in HTML5
HTML

Optimizing Web Form Autosavers in HTML5


If you’re a web designer who wants to learn how to take advantage of the powerful local storage mechanism provided by HTML5, you’ve come to the right place. Welcome to the final chapter of this article series. Made up of ten tutorials, this series explores the methods and properties included with the “localStorage” HTML5 object, and shows you how to use this object in the development of a few real-word web applications.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 4
February 01, 2011
TABLE OF CONTENTS:
  1. · Optimizing Web Form Autosavers in HTML5
  2. · Optimizing the autosaver's performance

print this article
SEARCH DEVARTICLES

Optimizing Web Form Autosavers in HTML5 - Optimizing the autosaver's performance
(Page 2 of 2 )

In reality, minifying the autosaver’s source file is an extremely simple task that can be performed in the flicker of the eye. The leg work is actually done by the shiny web service offered by Google (for more information on the service API, please check http://code.google.com/intl/es-ES/closure/compiler/docs/api-ref.html).

In this particular case, I decided to feed the file in question to the closure compiler and apply to it the level of SIMPLE compilation. This option does several things: it renames (when possible) variables and function names, and also strips out white space and comments. 

Once the compiler has properly digested the file, it returns the following output:

(autosaver.js)

function getFormState(){var a=document.getElementsByTagName("form")[0].elements;if(a.length!=0)for(var b=1;b<=a.length-1;b++){var c=a[b].getAttribute("name");if(c in localStorage&&localStorage[c]!==null)a[b].value=localStorage[c]}} function saveFormState(){var a=document.getElementsByTagName("form")[0].elements;if(a.length!=0){for(var b=false,c=1;c<=a.length-1;c++){var d=a[c].getAttribute("name");if(a[c].value!=""&&a[c].getAttribute("type")!="submit"){localStorage[d]=a[c].value;b=true}}if(b){c=new Date;a=c.getHours();b=c.getMinutes();c=c.getSeconds();a=a<10?"0"+a:a;b=b<10?"0"+b:b;c=c<10?"0"+c:c;a="[Form data was saved at "+a+":"+b+":"+c+"]";b=document.getElementById("time_container");if(b!==null)b.innerHTML=a;else{b=document.createElement("span"); b.setAttribute("id","time_container");b.appendChild(document.createTextNode(a));document.getElementsByTagName("fieldset")[0].appendChild(b)}}}}window.onload=function(){if("localStorage"in window&&window.localStorage!==null){getFormState();setInterval("saveFormState()",15E3)}};

If I ever have to put this file in the hands of another developer, he probably would give me an angry look and start plotting some kind of revenge. A kind reader like you, however, would take things much easier, since the good news is the compiler has reduced the file to about half of its original size -- at the expense of its readability, however. Needless to say, this compilation process is entirely optional, as the autosaver will remain entirely functional regardless of whether or not you minify it.

So far, so good. Now that you've seen how the previous file looks after being chewed up by Google’s closure compiler, the next logical step is to list the file along with the others that comprise the autosaver, in case you want to test it in its compiled version.

This will be done in the next segment, so move forward and keep reading. 

The compiled version of the web form autosaver

As I promised in the section that you just read, below I included the minified version of this sample web form autosaver. This way, you can have at your disposal all of its source files in one place, in case you want to edit them.

First, here’s the HTML5 file that renders the already familiar contact form:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Autosaving a web form with HTML5 local Storage</title>
<script src="autosaver.js"></script>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<div id="wrapper">
    <header>
        <h1>Contact us now!</h1>
    </header>   
    <nav>
        <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <section>
        <form action="processform.php" method="post">
            <fieldset>
                <ol>
                    <li>
                        <label for="subject">Subject: <em>[required]</em></label>
                        <input type="text" name="subject" id="subject" class="text" />
                    </li>
                    <li>
                        <label for="email">Email: <em>[required]</em></label>
                        <input type="email" name="email" id="email" class="text" />
                    </li>
                    <li>
                        <label for="comments">Comments:</label>
                        <textarea rows="10" cols="20" name="comments"></textarea>
                    </li>
                    <li>
                        <input type="submit" name="send" value="Submit" />
                    </li>
                </ol>
            </fieldset>
        </form>
    </section>
    <footer>
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    </footer>
</div>
</body>
</html>

Now, it’s time to list the CSS file that defines the layout and visual presentation of the previous web page (again, remember that Internet Explorer doesn’t support many of the elements styled below). The file looks like this:

(default.css)

/* layout styles */
body {
    padding: 0;
    margin: 0;
    background: #0C2478;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
    background: #fff;
}
header {
    display: block;
    padding: 20px;
}
nav {
    display: block;
    width: 920px;
    height: 30px;
    margin: 0 auto;
    padding-top: 10px;
    background: #eee;
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
nav ul li {
    float: left;
    width: 120px;
    text-align: center;
}
nav ul li a {
    display: block;
    width: 120px;
    text-decoration: none;
    color: #000;
    border-right: 1px solid #ccc;
}
section {
    display: block;
    padding: 20px;
}
footer {
    display: block;
    padding: 20px;
}
/* form styles */
form {
    width: 280px;
    padding: 30px;
    background: #dfefff;
}
form fieldset {
    border: none;
}
form fieldset ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
form fieldset ol li {
    margin-bottom: 10px;
}
form fieldset ol label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
form fieldset ol label em {
    font-style: normal;
    font-weight: normal;
    color: #00f;
}
form fieldset ol input.text {
    width: 250px;
}
form fieldset ol textarea {
    width: 250px;
}
/* time container */
#time_container {
    color: #00f;
}

And last but not least, here’s the compiled JavaScript file that implements the autosaver:

(autosaver.js)

function getFormState(){var a=document.getElementsByTagName("form")[0].elements;if(a.length!=0)for(var b=1;b<=a.length-1;b++){var c=a[b].getAttribute("name");if(c in localStorage&&localStorage[c]!==null)a[b].value=localStorage[c]}} function saveFormState(){var a=document.getElementsByTagName("form")[0].elements;if(a.length!=0){for(var b=false,c=1;c<=a.length-1;c++){var d=a[c].getAttribute("name");if(a[c].value!=""&&a[c].getAttribute("type")!="submit"){localStorage[d]=a[c].value;b=true}}if(b){c=new Date;a=c.getHours();b=c.getMinutes();c=c.getSeconds();a=a<10?"0"+a:a;b=b<10?"0"+b:b;c=c<10?"0"+c:c;a="[Form data was saved at "+a+":"+b+":"+c+"]";b=document.getElementById("time_container");if(b!==null)b.innerHTML=a;else{b=document.createElement("span"); b.setAttribute("id","time_container");b.appendChild(document.createTextNode(a));document.getElementsByTagName("fieldset")[0].appendChild(b)}}}}window.onload=function(){if("localStorage"in window&&window.localStorage!==null){getFormState();setInterval("saveFormState()",15E3)}};

Mission accomplished. Even when it’s valid to denote that this example application can be largely improved, it comes in handy for demonstrating how to use the “localStorage” object for saving and retrieving the state of a web user interface. So, fire up your own spark of creativity and start using the object in much more creative ways!

Final thoughts

It’s hard to believe it, I know, but we’ve come to the end of this series. The journey has hopefully been instructive, since you learned how to take advantage of the functionality offered by the “localStorage” object included with HTML5. As you saw in the previous tutorials, the object exposes a really straightforward API that permits you to easily perform common operations in the storage, such as saving, fetching and deleting items.

In addition, I demonstrated how to use the object in a few concrete use cases, like the one shown above. Therefore, armed with all of this material, you should be able to utilize the object to build your own programs or even enhance the behavior of existing ones. In either case, one thing is certain: HTML5 local storage is here to stay, so there’s no better time than now to start using it in the development of modern web applications.

See you in the next web design tutorial! 


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
HTML ARTICLES

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials