HTML5 Hacks

Chapter 6. Client-Side Data Storage Hacks

As the modern web browser continues to evolve into a capable application platform, another area of exciting advancements is occurring in client-side data storage, most notably in the AppCache, WebStorage, IndexedDB, and FileSystem API standards. The need for offline capabilities and performance improvements for reading and writing large amounts of data is driving browser manufacturers to build tools that allow client-side applications to define quotas on storage capacity, retrieve sandbox data to defined origins, and perform asynchronous reads/writes from local databases.

As we explore the storage APIs, we will continue our trend of exploring the pros and cons of each solution, introduce third-party libraries that offer polyfill support, and provide contextual examples for client-centric applications and the mobile web.

Hack 52. Embed Binary Data in an Inline URL

Data URLs offer an alternative to referencing external resources with image and link tags. The most common scenario involves images that you can reference directly from within an HTML document or an individual stylesheet.

In [Hack #19] we explored the performance trade-offs between CSS sprites and using data URIs within external stylesheets. In this hack we will focus on inlining image data within our HTML markup, and even see some of the different ways to do so using different server-side templating implementations.

Data URLs are a subtype of the Uniform Resource Identifier (URI) scheme ...