Overview

Cookies have been around since the beginning of JavaScript, so storing data on the web isn't a new concept. However, web storage is a much more powerful version of data storage that offers more security, speed, and ease of use. You can also store large amounts of data in web storage. The exact amount is based on the web browser, but it's often between 5 and 10MB, which is a lot of storage for an HTML application. Another perk is that this data is not loaded with every server request. The only limitation is that you cannot share web storage between browsers; if you store data in Safari, that data is not accessible in Mozilla Firefox.

There are two types of web storage objects built in to HTML5:

• The sessionStorage object stores data for a single session. If the user closes the page or browser, the data is destroyed.
• The localStorage object stores data with no expiration date. The data remains stored when the web page or browser is closed, depending on the storage amount set for the user's browser.

Both storage objects have the same methods and properties. For consistency, this article uses the localStorage object throughout the examples.

In this article, learn about the power of web storage and why it is a better storage method than cookies. Explore the basic web storage concepts, HTML5 web storage methods, and browser support.

You can download the source code for the examples used in this article.

Back to top

Browser support

The web storage feature is supported by all new versions of the latest browsers, including Firefox, Google Chrome, Safari, Opera, and Microsoft® Windows® Internet Explorer® 8+. Unfortunately, Internet Explorer 7 and earlier do not support web storage. Table 1 shows the versions of each desktop browser that support HTML5 web storage.

Chrome	Firefox	Safari	Opera	Internet Explorer
4+	4+	4+	11+	8+

Mobile browsers, aside from Opera Mini, also provide support for HTML5 web storage. Table 2 shows the versions of each mobile browser that supports HTML5 web storage.

iOS	Android	Opera Mini	Opera Mobile
5+	3+	NA	11+

The browser support for HTML5 web storage is pretty impressive. However, older browsers require some sort of browser check for web storage support before you attempt to use it. Checking a browser for web storage support is easy. You can use a simple conditional statement to see if the HTML5 storage object is defined. If it is defined, it's safe to proceed with the web storage scripting. If it is undefined, you must use an alternative method, such as JavaScript cookies, if data storage is necessary. Listing 1 shows an example of a simple way to check the browser for the Storage object.

if(typeof(Storage)!== "undefined") {
  // Web storage is supported
}
else {
  // Web storage is NOT supported
}

If a browser doesn't support web storage, you can create a custom web storage object using either JavaScript cookies or an existing library such as AmplifyJS. AmplifyJS is a set of components designed to solve common web application problems, including web storage support in certain browsers, with a simplistic API. AmplifyJS addresses the issue with the amplify.store wrapper to handle persistent client-side storage, which supports Internet Explorer 5+, Firefox 2+, Safari 4+, Chrome, Opera 10.5+, iOS 2+, and Android 2+. The library also provides a consistent API to handle storage cross-browser; you don't have to write different code based on the browser in question. If the browser supports HTML5 web storage, AmplifyJS uses the latest storage techniques. If the browser doesn't support HTML5 web storage, AmplifyJS degrades to support it without that function. See Resources to learn more about AmplifyJS and the API for its storage wrapper.

Back to top

Getting started

A few easy-to-use methods provide HTML5 web storage functions. These methods support setting a key/value pair, two options for retrieving a value based on a key, clearing all key/value pairs at once, and removing a specific key/value pair. Table 3 shows the available HTML5 web storage methods.

When creating and adding key/value pairs to the web storage object, you can use any data type as the value in the pair (a string, number, array, object, and so on). To store an array or object, you must use the JSON object to convert the data to a string using the JSON.stringify method. When retrieving the data, you can parse it using JSON.parse, which returns your object or array in its original state. There are also two different ways to add a key/value pair to the web storage object. The first is to use the setItem method, as in Listing 2.

				
localStorage.setItem('myKey', 'myValue');

The second option for adding a key/value pair to the web storage object is to set the key's value directly using the web storage object with dot syntax, as in Listing 3.

localStorage.myKey = 'myValue';

Retrieving stored values is just as easy. Again, there are two options. The first is to use the getItem method, which takes a key as an argument and returns the corresponding value if one exists. Listing 4 shows an example.

				
localStorage.getItem('myKey');

The second option for retrieving a key/value pair from the web storage object is to access it directly using dot syntax, as in Listing 5. This example returns the 'myValue' string value that was set in the previous examples.

localStorage.myKey;

There are also two ways to remove stored data. You can remove all items at once or you can remove individual items one at a time. To remove all items from web storage at once, use the clear method, as shown in Listing 6.

localStorage.clear();

To remove a single key/value pair from a web storage object, you need to use the removeItem method. Listing 7 shows an example of the removeItem method that receives a key as an argument to identify what key/value pair to remove from the storage object.

localStorage.removeItem('myKey');

Listing 8 shows an example of how to use the JSON object to store an array as a string using JSON.stringify. You handle objects the same way.

var myArray = new Array('First Name', 'Last Name', 'Email Address');
localStorage.formData = JSON.stringify(myArray);

To retrieve the string version of the array from web storage and convert it back to a usable array in JavaScript, simply use the JSON.parse method, as shown in Listing 9.

var myArray = JSON.parse(localStorage.formData);

Internet Explorer 8+, Opera 10.5+, Firefox 3.5+, Safari 4+, and Chrome all include a native JSON object to support the code in the previous examples. If you use an earlier browser, you can download the json2.js file (see Resources).

As shown thus far, web storage is easy to use. However, before jumping in you should be aware that security can be a concern on shared machines. Web storage is not any more secure than cookies. Don't store sensitive information, such as passwords or credit card numbers, on the client side.

Back to top

Web storage in action

Now that the basics are covered, it's time to put HTML5 web storage to use. Assume that, on your website, you have a web form for which you want to provide offline support. It would be great if a user could submit the form and have it sync with the server when the website is back online. This is possible with HTML5.

Create a simple web form that includes a first and last name, email address, and submit button, as shown in Listing 10.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5 Web Storage</title>
<style type="text/css">
label, 
input {
  display: block;
}
input {
  margin-bottom: 10px;
}
</style>
</head>

<body>

<form action="post.php" method="post" id="web-storage-form">
  <label for="first-name">First name:</label>
  <input type="text" name="first-name" id="first-name">

  <label for="last-name">Last name:</label>
  <input type="text" name="last-name" id="last-name">

  <label for="email-address">Email Address:</label>
  <input type="text" name="email-address" id="email-address">

  <input type="submit" value="Submit">
</form>

</body>
</html>

The form includes an ID to retrieve the form post and values using JavaScript. It also has CSS to create a basic layout with the form elements. The display:block property on labels and inputs places each element on a new line. The margin-bottom property creates space between the items so the page doesn't look cluttered.

When a user submits the form, the code first prevents the default post from occurring by retrieving the web-storage-form ID and catching the post using jQuery. When the form posts, you can gather the form values and the URL of the form action to store in variables. You have to serialize the web form values when sending the values as an Asynchronous JavaScript + XML (Ajax) post or storing them in web storage. Before the form is submitted, use the navigator.onLine property to see if the user is currently online.

If the user is online, use the jQuery.post function, which is a shorthand Ajax function, to send and receive the data from the server. This function accepts four arguments: the url to send the data to, the data you are sending (the serialized form values), a callback function that is fired upon a successful request, and a dataType. In this example, the dataType is not included so it uses the default.

If the user is not online, you get fancy with web storage. First, it's important to see if the browser supports web storage by using the conditional statement you created in Listing 1. If the browser does support web storage, you can save the form values directly to the localStorage object using a custom key. The example uses the formValues custom key. Now that the saving of the localStorage values is in place, check to see if they exist when the user gets back online by adding an if statement to check if localStorage.formValues has a value. If it does, you know that this form was previously submitted to localStorage and can safely send the data to the server using the jQuery.post method that you set up earlier. After the values are submitted, you should remove them from web storage so they're not accidentally submitted a second time. Listing 11 shows the code in action, from the form post using Ajax to the localStorage.

<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
  // Check for web storage values from a previous offline session
  if(localStorage.formValues) {
    console.log("localStorage.formValues: "+ localStorage.formValues);
    postForm($("#web-storage-form").attr('action'), localStorage.formValues);
    localStorage.removeItem("formValues");
  }

  $("#web-storage-form").submit(function(event) {
    // Prevent the form from posting
    event.preventDefault(); 

    // Gather values
    var formValues = $(this).serialize();
    var url = $(this).attr('action');
    postForm(url, formValues);
  });
 });

function postForm(url, formValues) {
  // Post to server or post to web storage
  if(navigator.onLine) {
    console.log("Online");
    $.post(url, formValues, function(data) {
      console.log("Success: "+ data);
    });
  }
  else {
    console.log("Offline");
    if(typeof(Storage) !== "undefined") {
      console.log("Storage supported");
      localStorage.formValues = formValues;
    }
  }
}
</script>

To create a complete example, a post.php file acts as the end point of the form post to receive and respond to the form request. This file simply receives the form post and responds by printing the array of key/value pairs, as in Listing 12. When the response is received by the jQuery.post, the data from the response writes to the console.

<?php print_r($_POST); ?>

Of course, you could make the example much more robust. For instance, you could include database storage on the server side and check the localStorage using an interval that constantly monitors whether the user's computer is back online to submit the form data.

Back to top

Summary

HTML5 offers a powerful new set of functions that are quickly picking up support from the latest versions of the major web browsers. Web storage is one of the compelling features of HTML5. However, use it wisely. As with cookies, users can turn off web storage. Always have a fallback in place to support those who prefer not to allow this new function.

Back to top

Download

Information about download methods

Resources

Learn

• Web Storage: Read the World Wide Web Consortium's (W3C) documentation to learn more about web storage.
  
  
• "Understanding built-in objects in JavaScript" (developerWorks, August 2011): Gain a foundational understanding of the intrinsic objects available in the JavaScript language.
  
  
• AmplifyJS: Learn more about the AmplifyJS set of components and its wrapper for persistent client-side storage, amplify.store.
  
  
• "Achieve cross-browser functionality with HTML5 and CSS3" (developerWorks, February 2011): Learn specific HTML5 and CSS3 techniques that work on all of the latest versions of the major browsers.
  
  
• jQuery library on IBM developerworks: Get more information about jQuery.
  
  
• developerWorks Web development zone: Find articles covering various web-based solutions. See the Web development technical library for a wide range of technical articles and tips, tutorials, standards, and IBM Redbooks.
  
  
• My developerWorks: Personalize your developerWorks experience.
  
  
• developerWorks technical events and webcasts: Stay current with technology in these sessions.
  
  
• developerWorks on Twitter: Join today to follow developerWorks tweets.
  
  
• developerWorks on-demand demos: Watch demos ranging from product installation and setup for beginners to advanced functionality for experienced developers.
  
  

Get products and technologies

• AmplifyJS: Download AmplifyJS..
  
  
• json2.js: Download json2.js and learn more about JSON.
  
  
• CDN version of the jQuery library: Get a content delivery network (CDN) from the Google developer website.
  
  
• IBM product evaluation versions: Download or explore the online trials in the IBM SOA Sandbox and get your hands on application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.
  
  

Discuss

• developerWorks community: Connect with other developerWorks users while exploring the developer-driven blogs, forums, groups, and wikis.
  
  

About the author

Kris Hadlock has been a contract web developer and designer since 1996. He has worked on projects for companies such as SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, Le Cordon Bleu, and Canon. He is the author of jQuery Mobile: Develop and Design (Peachpit), Ajax for Web Application Developers (Sams), and The ActionScript Migration Guide (New Riders). Kris is a featured columnist and writer for numerous websites and design magazines, including IBM developerWorks, Peachpit.com, InformIT.com, and Practical Web Design. He is also the founder of www.studiosedition.com, a web design and software development studio specializing in fusion of form and function.

Rate this article

Comments

Back to top

Table of contents

• Overview
• Browser support
• Getting started
• Web storage in action
• Summary
• Download
• Resources
• About the author
• Comments

Dig deeper into Web development on developerWorks

IBM SmartCloud trial. No charge.

Unleash the power of hybrid cloud computing today!

---

Public and private solutions in one trial.

Special offers