jQuery Mobile: Up and Running

Storing Offline Data

To store information locally while we are offline—or even online but we don’t want to use AJAX— HTML5-related technologies offer us three options:

• Web Storage API

• Web SQL Database API

• IndexedDB API

Tip

You can check current compatibility of every HTML5-related API on http://mobilehtml5.org.

In this book we are going to use the Web Storage API because it’s the simplest one and the most compatible API between A-grade jQuery Mobile browsers. This is a very simple API supporting two key-value based collections: localStorage and sessionStorage.

localStorage is a collection of strings stored persistently on the device and sessionStorage is pretty similar but it is removed from the system when the browser is closed.

Warning

Usually, we can store up to 5 Mb per host on local storage without any problems. However, most browsers store strings in Unicode, so one character will occupy two bytes. This means that it is safe to store 2.5 Mb of text.

The API is available as a global window attribute, called localStorage, with some methods available, such as getItem and setItem to load and save data to/from the collection.

The standard API can only store strings, but that means that we can store:

• Arrays and objects converted to a JSON-style string

• Simple values

• Comma-separated values

• JavaScript code (that we can evaluate later)

• CSS stylesheets (that we can inject later)

• HTML

• Images in base64 (data URI)

Tip

Modern mobile browser support the JSON API that allows us to convert objects to JSON strings ...