HTML5 Storage APIs

In the last chapter, we looked at creating a simple mobile web page and a simple Create Task form for our to-do list application. In this chapter, we will look at options for being able to store data locally on the device. HTML5 introduces a couple of APIs that permit this kind of client-side storage.

Previously when writing a web app, if you needed to save data to a database, you would need to use a server-side script (PHP, Python, Ruby, etc.) to do this for you. Some emerging elements of the HTML5 API offer a client-side alternative for this, and investigating these and how to effectively use them will be the primary focus of this chapter.

Essentially, three different types of client-side storage mechanisms are being implemented as part of the HTML5 specification:

Web storage: Often referred to as HTML5 local storage, this is a client- side mechanism for storing key/value pairs. It’s simple, but very powerful (see http://w3.org/TR/webstorage/).

Web SQL database: This provides access to a SQLite-like database, which is a client-side alternative to a traditional RDBMS that you might find on a server (see http://w3.org/TR/webdatabase/).

Indexed database: A draft specification that has been proposed by the W3C to replace the currently implemented Web SQL database specification, geared towards providing a “database of records holding simple values and hierarchical objects” (see http://w3.org/TR/IndexedDB/).

In this chapter, we will be focusing on the first two storage APIs listed above, providing both an overview and sample code for both.

Although the Indexed DB API has been put forward by the W3C to replace the Web SQL database, currently no versions of Android have shipped with support for the specification. For this reason, we have focused on the two that you can implement and use right now—Web Storage and Web SQL database.

48 CHAPTER 3: HTML5 Storage APIs

It is our firm belief that WebKit browsers (as used natively on Android) will continue to support the Web SQL database for some time to come so you should feel comfortable using that specification even though the W3C have indicated that they will not be creating any further revisions to the standard.

The Web Storage API

Both the localStorage and sessionStorage objects implement the Storage interface, and this provides the following methods:

getItem setItem removeItem clear

These four methods capture pretty much the entire functionality of the Storage API, and while they appear simple, they open up some great opportunities. The magic lies in the fact that you can save any object into Storage. You just provide a key to access the value later, and away you go.

In a simple case, you might simply save a string or other simple type values into storage. Consider the following code:

localStorage.setItem(“preferences-bgcolor”, “#333333”); localStorage.setItem(“preferences- textcolor”, “#FFFFFF”);

This creates two values in localStorage for tracking application preferences for a background and text color. You could, however, achieve the same result by just storing

a single object in localStorage with the following code:

Download from Wow! eBook <www.wowebook.com>

localStorage.setItem(“preferences”, { bgcolor: “#333333”, textcolor: “#FFFFFF”

}); You can retrieve your preferences object by using a simple call to getItem: var preferences = localStorage.getItem(“preferences”); You should then be able to access the background color and text color preferences

from the preferences object. Let’s try that now. Just show an alert to display the background color:

alert(preferences.bgcolor); Um, well, that’s embarrassing. Depending on the implementation of the Web Storage

API browsers are using at the time you are reading this book, you may well find that the preceding call just shows you a message as per the JavaScript alert displayed in Figure 3–1.

CHAPTER 3: HTML5 Storage APIs

Figure 3–1. Accessing objects in localStorage may not yield the expected/documented results. What does that mean for you right now? Can you only store simple values in

localStorage and sessionStorage? Yes . . . but you can always use JSON (JavaScript Object Notation) to serialize your objects first and then save them as strings. This is definitely worth investigating, so the first exercise of this chapter relates to that.

NOTE: If you haven’t encountered a situation like this previously, then welcome to the world of the early technology adopter—things change. We discussed this earlier, but here is a firsthand example in which the browser builders believed part of the HTML5 spec had stabilized enough for implementation, when in actual fact there were still some tweaks on the way. This is all part of the fun, and we are likely to come across more examples of this through the course of the book.

If you do come across something that doesn’t work as expected, or something in the book isn’t in line with the current HTML5 spec, then please provide some feedback online: www.apress.com.

HTML5 Storage APIs