Home arrow HTML arrow Deleting Data with the removeItem() Method in HTML5
HTML

Deleting Data with the removeItem() Method in HTML5


In this fifth part of the series, I show you how easy it is to remove data from the browser’s local storage by using the “removeItem()” method. As you'll soon see, the removal process practically speaks for itself, so you shouldn’t have major problems replicating it during the development of your own JavaScript applications.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 3
January 18, 2011
TABLE OF CONTENTS:
  1. · Deleting Data with the removeItem() Method in HTML5
  2. · Deleting data from the local storage with the removeItem() method

print this article
SEARCH DEVARTICLES

Deleting Data with the removeItem() Method in HTML5
(Page 1 of 2 )

Without a doubt, one of the technologies making the most waves in web design during the past year is HTML5. Aside from including a decent number of brand new structural elements, aimed at adding a stronger semantic meaning to sections of a web page, the specification offers features for enhancing the behavior of web applications via client-side scripting.

Among the features mentioned is one that offers an easy learning curve and boasts acceptable levels of support from most modern browsers (including Internet Explore 8+). In this case, I’m referring to “local storage,” a sort of client-side persistence mechanism which allows you to save data in the browser through a remarkably simple API.

As one might expect, the data can be saved to and retrieved from the mechanism by means of some intuitive JavaScript methods, or even by directly accessing the properties of the “localStorage” object. In fact, I discussed both approaches in detail in earlier tutorials of this series, so in theory at this point you should have a pretty clear idea of how to take advantage of the functionality offered by the object, at least at a basic level.

It’s valid to point out that other than saving and fetching items, the local storage mechanism permits you to remove data in a fairly straightforward fashion, through another convenient method not surprisingly called “removeItem().” Therefore, in this fifth chapter of the series I’ll be demonstrating how to work with this method. As usual, I'll use an approachable example, which you’ll be able to modify to fit your own requirements.

Now, it’s time to leave the dull and arid theory behind us and explore a few other benefits provided by the “localStorage” object. Let’s get going!

Review: manipulating local storage data using a tighter notation

One of the best things about the “localStorage” object mentioned at the beginning is its flexible model. This becomes particularly evident when saving and retrieving data in the browser. These tasks can be performed either through the complementary “setItem()/getItem()” methods, or by directly accessing the object’s properties.

Since you should already be familiar with using the previous methods, below I reintroduced the example developed in the preceding article. It shows first how to save some trivial strings in the local storage and then how to embed them into an alert box by employing the aforementioned “object[property]” notation. Here’s the example:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 local Storage</title>
<script type="text/javascript">
// using the alternate syntax
function HTML5Storage() {
    // add the items to the local storage
    if ('localStorage' in window && window['localStorage'] !== null) {
        localStorage['fname'] = 'Julie';
        localStorage['lname'] = 'Smith';
        localStorage['email'] = 'julie@domain.com';
    }
    // get the items from the local storage
    var fname = localStorage['fname'];
    var lname = localStorage['lname'];
    var email = localStorage['email'];
    alert('First Name: ' + fname + ' Last Name: ' + lname + ' Email: ' + email);
}
// 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 code fragment depicts, pushing data into and pulling data out of the “localStorage” object is a simple process, reduced to accessing the corresponding properties and assigning new values to them. It’s that easy. If you're still not convinced of the veracity of my claim, then give the previous example a try using your own browser. If everything goes well, you should see on screen an alert box displaying some information about a fictional user.

While saving and fetching items in the browser are by far the primary tasks of the “localStorage” object, it should provide some mechanism that allows you to delete the stored data. After all, it's not always desirable to have data persisting forever between different requests, right?

Fortunately, the object does offer another method. Called “removeItem(),” it can be used for removing a previously saved item. In the next section I’m going to modify the implementation of the earlier “'HTML5Storage()” function to make use of this brand new method.

To learn more about this example, 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