Head First HTML5 Programming

Chapter 9. Storing Things Locally: Web Storage

Tired of stuffing your client data into that tiny closet cookie? That was fun in the ‘90s, but we’ve got much bigger needs today with web apps. What if we said we could get you five megabytes on every user’s browser? You’d probably look at us like we were trying to sell you a bridge in Brooklyn. Well, there’s no need to be skeptical—the HTML5 Web Storage API does just that! In this chapter we’re going to take you through everything you need to store any object locally on your user’s device and to make use of it in your web experience.

How browser storage works (1995 - 2010)

Building a shopping cart? Need to store some user preferences for your site? Or just need to stash some data that you need to be associated with each user? That’s where browser storage comes in. Browser storage gives us a way to persistently store data that we can use in building a web experience.

Behind the Scenes

Up until now there’s been one game in town—the browser cookie—for storing information on the browser. Let’s see how cookies work:

1. When your browser retrieves a web page, say from “pets-R-us.com,” the server can send a cookie along with its response. Cookies contain one or more key and value pairs:

2. The next time the browser makes a request to “pets-R-us.com,” it ...