Hands-On Sencha Touch 2

Chapter 10. Offline Storage (Client Proxies)

We discussed how to save and load remote data via the server proxy in Chapter 8. Proxies can also save and load data from the client side via the client proxy. This comes in handy when you want to load or save data offline. When working with external APIs, you might want to think about offline storage. For example, for the FindACab app, you are using the Yelp web service, so every time you load the app you retrieve data from the API. But suddenly your console throws an error message. Bummer: you’ve reached the daily API request limit. There’s nothing you can do anymore, but there is a way to prevent this scenario from happening in the first place: storing your data results in the app itself. So what are the options, and how can you save all your data?

Although mobile devices are portable, this doesn’t necessarily mean that users are always online. They could have a bad WiFi signal, they may be on the subway, or they might have a limited data plan, for example.

This is why offline storage is so important. HTML5 offers a powerful way to achieve this with Local Storage, Session Storage, Web SQL, and Application Cache.

HTML5 Local Storage

HTML5 Local Storage saves its data with no expiration date. You use it to save key/value pairs. The Sencha framework uses it internally to save persisted JavaScript (Sencha) classes. When you open a Sencha Touch app while you are offline, the Sencha Touch app itself can run because all the assets are stored ...