Home arrow HTML arrow Page 2 - 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 - Testing support for HTML5 localStorage with a small JavaScript function
(Page 2 of 2 )

To be frank, checking to see if a browser supports the “localStorage” object is a straightforward process. Simply put, the entire testing procedure is reduced to building a JavaScript function similar to the one show below:

// testing HTML5 storage support
function testHTML5Storage() {
    if ('localStorage' in window && window['localStorage'] !== null) {
        alert('HTML5 localStorage is supported by your browser!');
    }
}
// call the 'testHTML5Storage()' function when the web page is loaded
window.onload = function() {
    testHTML5Storage();
}

As shown before, all that the above “testHTML5Storage()” function does is check to see if the “localStorage” property is present in the window object. If it is not, nothing happens. If the condition is satisfied, a silly alert pops up on screen informing the user of the good news. Finally, the function is called once the web page has been loaded. That was really simple to code and read, wasn’t it?

So far, so good. Now that you've grasped how this naive function performs the checking process, it's time to include it into the HTML5 document defined previously, so you can try it and see the results that it produces.

This will be done below, so read the next few lines.

Including the previous JavaScript snippet in the HTML5 document

As I noted above, below is the complete definition of the previous HTML5 document, which this time includes the JavaScript snippet just created. Here it is:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Testing HTML5 local Storage support</title>
<script type="text/javascript">
// testing HTML5 storage support
function testHTML5Storage() {
    if ('localStorage' in window && window['localStorage'] !== null) {
        alert('HTML5 localStorage is supported by your browser!');
    }
}
// call the 'testHTML5Storage()' function when the web page is loaded
window.onload = function() {
    testHTML5Storage();
}
</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>

Done. Now, if you give the above web page a try using any of the browsers mentioned in the introduction, you should be confronted with an alert box telling you that the HTML5 local storage feature is fully supported.

From this point onward, you may take two possible approaches: first, do some Googling and find more information on the “localStorage” object. And second (which I strongly recommend), wait for the next part of the series to see how to use the object to save some data. Have you already chosen the latter? Good! You won’t regret your choice, trust me.

Final thoughts

In this first part of the series, I provided you with a humble introduction to using the “localStorage” object that comes with HTML5. Although the code examples shown were pretty basic, they should give you a pretty clear idea of how to check if the object is supported by your browser, so it can be safely used for further manipulation.

At this point, of course, I’m only scratching the surface of the capabilities provided by “localStorage,” but that will change soon. In the next tutorial I’ll demonstrate how to store some strings in the object, via its “setItem()” method.

Don’t miss the next part!


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