HTML5 in the browser: Local data storage

HTML5 Web Storage, Web Database, FileReader, FileWriter, and AppCaching APIs will transform Web pages into local applications, but not yet

Page 4 of 5

HTML5 Offline Web Applications: AppCaching
Letting Web pages store data locally can certainly help reduce network traffic by caching the AJAX calls and other important information displayed to the user. It doesn't do anything, though, about the Web page caching itself. (This isn't exactly true because websites can download much of their own logic and evaluate it, but a bit of bootstrapping code is still necessary to start up the page.)

The AppCaching API spells out just how long the browser can keep pieces of the Web pages stored locally. This not only reduces the need for reloading the pages, but it also makes it possible for the Web pages to work without an Internet connection. In other words, it makes them more like installed software.

There's already a fair amount of support for caching in the header tags of an HTML page, but it doesn't extend to the JavaScript files or the CSS pages. The AppCaching API solves this by creating a manifest file that lists all of the important parts of the Web page so that the browser won't get confused. The manifest is listed in the big html tag like this: <html manifest="page.manifest">. The browser then looks at the list of files -- delivered with its own MIME type text/cache-manifest -- and treats them as a unit.

The application cache treats a few items differently. Data calls to server-side CGI functions, for instance, can be labeled in a separate part of the list so that they're not cached. There's also a general fallback section to handle problems. I'm guessing that these might be most useful when loading parts of a page from problematic websites. It could provide icons for unavailable images, for instance, that can't be found at a photo sharing site.

When the manifest changes, the browser reloads everything -- a process that might be transparent but doesn't have to be. There's an ApplicationCache object that fires events whenever significant actions happen. If the code is updated, these events could be used to tell the user.

Embedding custom nonvisible data
Another interesting option is burying the data inside of the DOM tree. The JQuery framework, for instance, comes with a data method that will attach arbitrary objects to pieces of the DOM tree, allowing you to store data with some part of the screen that the user can't see. This makes it simpler to code operations like drag and drop because there's no need to keep separate track of the data and the representation of it.

Some HTML5 developers want to bring this feature to HTML5 in a standard way. The proposal lets arbitrary name-value pairs be attached to parts of the DOM tree. It isn't well supported yet.

HTML5 Microdata
The idea behind the HTML Microdata spec is to create a class of machine-readable metadata tags that websites might add to the visible information. Instead of just inserting the characters "January 1st, 2011" or "New Year's Day," the website builder can add the time tag like this: <time itemprop="birthday" datetime="2011-01-01">New Year's Day</time>.

Search engines and other Web crawlers will be able to understand the underlying data without doing too much work trying to parse or guess the writer's meaning. It will already be coded in machine-readable form.

| 1 2 3 4 5 Page 4
From CIO: 8 Free Online Courses to Grow Your Tech Skills
Notice to our Readers
We're now using social media to take your comments and feedback. Learn more about this here.