Home arrow HTML arrow HTML5 and the clear() Method
HTML

HTML5 and the clear() Method


In this sixth part of the series, you'll learn how to use the “clear()” method provided by the “localStorage” object to clear in one go all the items saved in the local storage. The underlying logic of this method is extremely simple to follow, so you won’t have major difficulties employing it within your own JavaScript applications.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
January 24, 2011
TABLE OF CONTENTS:
  1. · HTML5 and the clear() Method
  2. · Flushing the local storage with the clear() method

print this article
SEARCH DEVARTICLES

HTML5 and the clear() Method
(Page 1 of 2 )

If you're in search of an approachable guide that shows you in a step-by-step fashion how to take advantage of the functionality provided by the "localStorage" object bundled with HTML5, then start reading this article series. In its tutorials, you'll learn how to manipulate the API exposed by this object to save and retrieve data from the browser without having to appeal to the limited capacity of cookies.

And now that you know what to expect from this series, it's time to review the topics that were covered in its last installment. In that tutorial I developed a basic example that demonstrated how easy it is to delete a specific item from the local storage by using the "removeItem()" method of the aforementioned object. In addition, I introduced the object's "length" property, which permits you to determine the number of items present in the storage, without having to utilize dirty browser hacks.

At this stage, you may feel inclined to think that these are all of the features that the object offers, right? Well, not really. In fact, it provides a few additional methods that deserve a close analysis as well. One of them is the brand new "clear()," which can be used for clearing the local storage in one go.  
  
Thus, in this sixth episode of the series I'll be examining this handy method in depth, so that you can learn how to use it and, of course, how to include it within your own JavaScript programs.

Now, read the lines to come!

Deleting items from the local storage with the "removeItem()" method

As I stated in the introduction, the "localStorage" object includes a method called "removeItem()" that allows you to delete an element from the browser by simply specifying its key. In case you still don't know how to work with this method, below I reintroduced the example created in the preceding tutorial. It demonstrates the method's functionality, along with that provided by the "length" attribute. Here it is:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 local Storage</title>
<script type="text/javascript">
// using the removeItem() 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');
    }
    // remove some items from the local storage
    localStorage.removeItem('lname');
    localStorage.removeItem('email');
    alert('The number of items saved to the local storage is: ' + localStorage.length);
}
// 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>

Since the "localStorage" object is nothing but a registry that resides in the client, pretty similar to the one that can be implemented through any server-side programming language, it must provide a simple mechanism for deleting stored elements. Well, as the above code snippet shows, the deletion mechanism is the "removeItem()" method, which in this case is used for removing two of the three elements previously saved by the "HTML5Storage()" function.

Thanks to the use of the "length" property, it's really simple to check if the method works correctly. If you're still not convinced, simply test the earlier web page using your own browser. If all goes well, you should see an alert box informing you that the number of items saved to the local storage is 1 (I bet that at this moment you're doing the math, right?).

So far, so good. Now that you've recalled how the "removeItem()" does its thing, it's time to explore a few other features offered by the "localStorage" object. In line with the concepts deployed at the beginning, in the coming section I'm going to redefine the already familiar "HTML5Storage()" function. This time, we'll empty the contents present in the storage by means of the previously mentioned "clear()" method.     

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

antalya escort escort antalya antalya escortlari antalya escort bayan