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 ...