We have talked about HTML5 and CSS3 markup, but now let’s turn our attention to some of the technologies and features associated with HTML5. Cross-document Messaging and offline support, for example, let us communicate across domains and create solutions that let our users work offline.
Some features such as Web Storage, Web SQL Databases, and Web Sockets were spun off from the HTML5 specification. Others, such as Geolocation, were never part of the specification at all, but browser makers and developers have associated Geolocation with HTML5 because the specification is being implemented alongside other features.
This part of the book covers these features, with more attention given to those features that are already usable right now. We’ll also spend a chapter discussing things that are coming next. Let’s start by looking at Web Storage and Web SQL Storage, two specifications that let us store data on the client.
Remember when cookies were awesome? Neither do I. Cookies have been rather painful to deal with since they came on the scene, but we have put up with the hassle because they’ve been the only way to store information on the clients’ machines. To use them, we have to name the cookie and set its expiration.
This involves a bunch of JavaScript code we wrap in a function so we never have to think about how it actually works, kind of like this:
/ / v i a h t t p : / / w w w . j a v a s c r i p t e r . n e t / f a q / s e t t i n g a . h t m
function S e t C o o k i e ( c o o k i e N a m e , c o o k i e V a l u e , n D a y s ) {
var t o d a y = new D a t e O ;
var e x p i r e = new D a t e O ;
if (nDays==null || nDays==0) nDays=l;
e x p i r e . s e t T i m e C t o d a y . g e t T i m e C ) + 3 6 0 0 0 0 0 * 2 4 * n D a y s ) ;
document. c o o k i e = c o o k i e N a m e + ” = ” + e s c a p e ( c o o k i e V a l u e )
+ “; expi res= ” + e x p i re . t o G M T S t r i n g O ;
}
Aside from the hard-to-remember syntax, there are also the security concerns. Some sites use cookies to track users’ surfing behavior, so users disable cookies in some fashion.
HTML5 introduced a few new options for storing data on the client:
Web Storage (using either localStorage or sessionStorage)1 and Web SQL Databases.2 They’re easy to use, incredibly powerful, and reasonably secure. Best of all, they’re mplemented today by several browsers, including iOS’s Mobile Safari and Android 2.0’s web browser. However, they are no longer part of the HTML5 specification—they’ve been spun
off into their own specifications.
While localStorage, sessionStorage, and Web SQL Databases can’t replace cookies intended to be shared between the client and the server—like in the case of web frameworks that use the cookies to maintain state across requests—they can be used to store data that only users care about, such as visual settings or preferences. They also come in handy for building mobile applications that can run in the browser but are not connected to the Internet. Many web applications currently call back to a server to save user data, but with these new storage mechanisms, an Internet connection is no longer an absolute dependency. User data
could be stored locally and backed up when necessary.
When you combine these methods with HTML5’s new offline features, you can build complete database applications right in the browser that work on a wide variety of platforms, from desktops to iPads and Android phones. In this chapter, you’ll learn how to use these techniques to persist user settings and create a simple notes database.
In this chapter, we’ll get acquainted with the following features:
localStorage
Stores data in key/value pairs, tied to a domain, and persists
across browser sessions. [C5, F3.5, S4, IE8, 010.5, IOS, A]
sessionStorage
Stores data in key/value pairs, tied to a domain, and is erased
when a browser session ends. [C5, F3.5, S4, IE8, 010.5, IOS, A]
Web SQL Databases
Fully relational databases with support for creating tables, inserts,
updates, deletes, and selects, with transactions. Tied to a domain
and persists across sessions. [C5, S3.2, 010.5, IOS3.2, A2]
Offline Web Applications
Defines files to be cached for offline use, allowing applications to
run without an Internet connection. [C4, S4, F3.5, 010.6, IOS3.2,
A2]