Home arrow HTML arrow Building a Visitor Counter in HTML5
HTML

Building a Visitor Counter in HTML5


In this eighth part of the series, I demonstrate how the “localStorage” object's functionality can be used to implement a simple, highly-customizable visitor counter. Although the counter as created here hardly competes with those created with a server-side programming language, it does give you a concrete scenario in which this object can be employed in a more helpful and realistic manner.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 8
January 26, 2011
TABLE OF CONTENTS:
  1. · Building a Visitor Counter in HTML5
  2. · Implementing a client-side visitor counter

print this article
SEARCH DEVARTICLES

Building a Visitor Counter in HTML5
(Page 1 of 2 )

Simply put, “local storage” is a powerful feature bundled with HTML5. It will let you save up to 5 MB of data in the browser, breaking the storage barrier imposed by cookies. What’s more, you can fetch the data and manipulate it in all sorts of clever ways, even if you close your browser’s tab. What else can you ask for?

Of course, telling you the benefits of using local storage would be pointless if I don’t include a decent number of hands-on examples, which you can customize and tweak at will. With that in mind, in previous chapters of this series I developed a few basic examples. They demonstrated how to save, retrieve, and delete elements from the storage by using the “setItem(),” “getItem()” and “deleteItem()” methods.

I also showed how to flush the entire storage area through the “clear()” method, and even how to determine the number of stored items via the “length” property. It seems that at this point, we’re finally done covering the API provided by local storage. So come on, it’s time to throw a party!

Well, not so fast. While learning how to use the aforementioned methods in some contrived scenarios is all well and good, it’d be useful to illustrate how to utilize them in more realistic use cases. In line with this concept, in this eighth part of the series, I’m going to show you how to build a simple counter visitor. It'll be similar to one you can implement with any server-side programming language, but in this case the counter will rely exclusively on the local storage’s functionality.

Ready to see how this client-side visitor counter will be developed? Then go ahead and start reading!

Reviewing the “key()” method

Just in case you haven’t read the last tutorial of this series, where I discussed how to use the “key()” method of the “localStorage” object, I included the example created then. Here it is:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 local Storage</title>
<script type="text/javascript">
// using the key() method
function HTML5Storage() {
    // add the items to the local storage
    if ('localStorage' in window && window['localStorage'] !== null) {
        localStorage.setItem('fname', 'Julie');
        localStorage.setItem('lname', 'Smith');
        localStorage.setItem('email', 'julie@domain.com');
    }
    // get the items from the local storage
    var fname = localStorage.getItem('fname');
    var lname = localStorage.getItem('lname');
    var email = localStorage.getItem('email');
    for(var i = 0; i <= localStorage.length-1; i++) {
        alert(localStorage.key(i));
    }
}
// call the 'HTML5Storage()' function when the web page is loaded
window.onload = function() {
    HTML5Storage();
}
</script>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #ccc;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
p {
    margin: 0 0 10px 0;
}
#wrapper {
    width: 960px;
    margin: 0 auto;
    background: #fff;
}
#header, #content, #footer {
    padding: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <header>
            <h1>HTML5 Storage</h1>
            <section>
                <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>
            </section>
        </header>
    </div>
    <div id="content">
        <h2>This is the main content section</h2>
        <section>
            <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>
        </section>
        <section>
            <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>
        </section>
    </div>
    <div id="footer">
        <footer>
            <h2>This is the footer</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>
</div>
</body>
</html>

From the above code snippet, it’s fairly easy to guess what the “key()” method does. In short, it takes a numeric value as an argument and returns the key that was assigned to that element in the local storage. To demonstrate this process more clearly, the earlier “HTML5Storage()” function first saves some items in the browser, then iterates over them, and finally displays their keys (“fname,” “lname” and “email”) on screen via an alert box. It’s that simple, really.

And now that you understand how the “key()” method functions, it’s time to start developing the client-side visitor counter mentioned in the introduction, so you can see how to use the local storage in a scenario that is a bit closer to reality.

The details regarding the construction of this counter will be discussed in the next section, so jump ahead and keep reading.


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-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials