Home arrow HTML arrow HTML5 Local Storage Overview
HTML

HTML5 Local Storage Overview


HTML5 has excited many web designers and developers over the last year, thanks to the huge variety of brand new features bundled with the specification. Although the lack of proper support by some modern browser is somewhat frustrating (with Internet Explorer one of the worst offenders), a growing number of browser vendors are starting to adhere to HTML5, at different paces. This article series will cover "localStorage," one of the specification's most overlooked enhancements.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
January 04, 2011
TABLE OF CONTENTS:
  1. · HTML5 Local Storage Overview
  2. · Testing support for HTML5 localStorage with a small JavaScript function

print this article
SEARCH DEVARTICLES

HTML5 Local Storage Overview
(Page 1 of 2 )

With this promising panorama finally on the horizon, it’s common to hear people talking about the new elements that HTML5 incorporates, such as <header>, <nav>, <footer> and so forth, which permit you to add a stronger semantic meaning to sections of a web page without having to appeal to generic divs. While these elements are all well and good, HTML5 also comes with features that can deliver impressive results, when coupled with the functionality offered by client-side scripting. Of course, the first thing that comes to my mind is the <canvas> element, which has been extensively discussed in blogs and e-zines.

However, there’s another enhancement that has been overlooked by many designers, quite possibly because they’re not aware of its existence. As this article’s title suggests, I’m talking about “localStorage” (http://dev.w3.org/html5/webstorage/). It's a handy JavaScript object that allows you to save up to 5 MB of data in the client by using an incredibly simple syntax, similar to the mutator/getter notation that you’ll find in many object-oriented programming languages. What’s more, all of the data stored in the object will remain available until the browser’s window is closed (although this behavior may vary from vendor to vendor), so it’s possible to keep that data living happily in storage even if multiple tabs are closed.

Definitely, one of the best things about “localStorage” is that it is currently supported my most major browsers, including Internet Explorer 8+, (yes, you read right), Firefox 3.5+, Safari 4.0+ and Chrome 4.0+ (for more information, please check http://diveintohtml5.org/storage.html). This implies that it can be employed in a cross-browser fashion to develop enhanced web applications that make clever use of it.

Assuming that the HTML5 “localStorage” object has already caught your attention, in this article series I’ll be taking a close look at it. You'll learn quickly how to take advantage of the functionality that it provides right out of the box. So start reading!

Setting the environment to use the “localStorage” object: building a basic HTML5 document

Before I show you all the bells and whistles that “localStorage” offers, I’m going to define a trivial HTML5 document so I can demonstrate the usage of this object in a more realistic environment. Check it out:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing HTML5 local Storage support</title>
<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>

If you’re beginning to use HTML5 when coding your web pages, surely you’ll find the structure shown above pretty easy to grasp. It defines the typical sections seen in nearly every website today: a “header,” a “navbar” and a “content” area, and finally a “footer.” It’s that simple.

With this really elemental HTML5 document properly created, we've set the stage to start testing the  abilities provided by the “localStorage” object. In the next section I’ll be adding a small piece of JavaScript to the document. The JavaScript will check to see if the browser currently being used offers support for this object.

To learn how this will be done, click on the link below 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-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials