HTML and CSS Reference
In-Depth Information
When using base64-encoded data URIs, be aware that the encoded data
is one third larger in size than its binary equivalent. (However, this
overhead is reduced to 2 to 3% if the HTTP server compresses the re‐
sponse using GZIP.)
Using Web Storage Today
As you have seen, there are a million different ways to use Web Storage within your
application. It really comes down to answering a few questions:
• How can I make the user experience better?
• How can I reduce HTTP requests on mobile?
• How can I efficiently reduce load on the server?
Of course, after seeing that Web Storage blocks the main JavaScript UI thread when
accessing data, you must be considerate of how your page loads and use best practices
for storing and retrieving data.
The best place to start with
localStorage
is using it where your app requires user input.
For example, if you have a comments input box within a form, you could use
local
Storage
to save a draft on the user input in case the session times out or the form is
submitted improperly. The commenting service Disqus follows this practice and saves
your draft comments in
localStorage
.
Enable automatic sign-in
Another good use of
localStorage
is for automatic sign-in. Here is a recommendation
from section 3.3.2 in the W3C Mobile Web Application Best Practices:
3.3.2.1 What it means
If an application requires user identity it is usual to prompt for user credentials (username
and password) and provide the option to sign-in automatically on next usage session.
This is especially important on a mobile device where data input is more difficult than
on a desktop.
Note that if automatic sign-in is enabled, a sign-out link should also be provided.
3.3.2.2 How to do it
User credentials can be stored in a cookie or in local storage. However, it is important not
to store unencrypted password information since this is insecure. Typically, a securely
hashed token which, if necessary, can be revoked on the server, is stored locally in order
to enable automatic sign-in.
