Home arrow HTML arrow HTML5 Local Storage and the getItem() Method
HTML

HTML5 Local Storage and the getItem() Method


In this third part of a series, you will learn how to get previously saved data from the browser by using the "getItem()" method provided by the "localStorage" object. You'll be amazed at how simple it is to use this method.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 11
January 10, 2011
TABLE OF CONTENTS:
  1. · HTML5 Local Storage and the getItem() Method
  2. · Retrieving data from the local storage with the getItem() method

print this article
SEARCH DEVARTICLES

HTML5 Local Storage and the getItem() Method
(Page 1 of 2 )

Aside from the brand new elements that let you emphasize the semantic meaning of your carefully-crafted web pages, such as <header>, <nav> and <footer>, HTML5 offers other features that will make you smile, especially if you enjoy enhancing the default behavior of your applications with JavaScript. Well, I can hear you saying that the <canvas> tag is useful, and I certainly agree with that. But in this case, I'm talking about a different feature, which so far hasn't gained <canvas>'s level of popularity.

As this article's title suggests, I'm referring to "localStorage." This powerful JavaScript object, bundled with the specification, will let you store up to 5 MB of data in the browser, without having to appeal to the limited capacity of cookies. And best of all, the data will persist between different requests until you close the browser's window. That's pretty interesting, isn't it?

What's more, if you've read the previous tutorial, you know how to save some trivial strings in the browser by using the object's "setItem()" method. In that article, I discussed this process in depth. Of course, storing data in the client without being able to get it back is rather useless. But fear not; "localStorage" provides a complementary method, called "getItem()," which permits you to do exactly that in an extremely intuitive manner.

If you want to learn how to utilize the method, in this third part of the series I'll be developing an example that will walk you through the details of this process. So, are you ready to dig deeper into the capabilities offered by the "localStorage" HTML5 object? Then keep reading!

Review: the "setItem()" method

In the previous part, as I mentioned above, I explained how to save some basic strings to the browser by using the "setItem()" method of the "localStorage" object. In case you haven't read it, below I listed the example I developed then, which you'll grasp very quickly. Here it is:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 local Storage</title>
<script type="text/javascript">
// add some items to the local storage
function HTML5Storage() {
    if ('localStorage' in window && window['localStorage'] !== null) {
        localStorage.setItem('fname', 'Julie');
        localStorage.setItem('lname', 'Smith');
        localStorage.setItem('email', 'julie@domain.com');
    }
}
// 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>

As the above sample code shows, saving some strings to the browser's local storage via the "setItem()" method is a simple process that can be mastered in the flicker of an eye. At present, the data passed to the method (along with the associated key, by the way) must be only strings, so if you need to save more complex structures, like objects and collections, make sure to JSON-encode them in the first place.

And now that you've grasped (or recalled) how to work with the "setItem()" method, it's time to take a close look at its counterpart "getItem()." As its name implies, this method comes in handy for fetching existing data from the local storage.

The details regarding the use of this method will be discussed in the following section; therefore, to learn more about them, 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-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials