Why is localStorage not used to store static resources?

Question

It is obvious that popular sites are not using HTML 5 application caching to save static resources as it was designed for.

You’ve misunderstood what application caching was designed for. Here’s the first paragraph of the application cache spec:

In order to enable users to continue interacting with Web applications and documents even when their network connection is unavailable — for instance, because they are traveling outside of their ISP's coverage area — authors can provide a manifest which lists the files that are needed for the Web application to work offline and which causes the user's browser to keep a copy of the files for use offline.

http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#introduction-5

So, application caching was designed to allow web app authors to make their apps work when a network connection isn’t available.

I can’t envisage how Google, Twitter or Facebook could usefully work without a network connection. They all rely on the user interacting with enormous amounts of data (in Twitter and Facebook’s case, data about other users) on their servers. They’re inherently useless without a network connection.

Likewise, localStorage isn’t designed for storing page resources that may change. (I presume you’re suggesting that these sites could store CSS, JavaScript and image files in localStorage — apologies if I’ve misunderstood.)

This specification introduces two related mechanisms, similar to HTTP session cookies, for storing structured data on the client side...

The first is designed for scenarios where the user is carrying out a single transaction, but could be carrying out multiple transactions in different windows at the same time...

The second storage mechanism is designed for storage that spans multiple windows, and lasts beyond the current session. In particular, Web applications may wish to store megabytes of user data, such as entire user-authored documents or a user's mailbox, on the client side for performance reasons...

http://www.w3.org/TR/webstorage/#introduction

In order to use localStorage for CSS, JavaScript and image files, you’d need some JavaScript in the page that checked localStorage for each resource required by the page, then (somehow) checked the server to see if there was a newer version, grabbing it if necessary, then added the resource to the DOM of the page (and stored it in localSorage if it was new).

That’s a lot of code to basically replicate the caching that web browsers already do. And while your JavaScript is checking localStorage and the server, the page stops rendering. Whereas when the browser downloads CSS and image files itself, the page can carry on rendering whilst it does so.