HTML and CSS Reference
In-Depth Information
CHAPTER 6
Optimizing with Web Storage
Today, you have two widespread and well-supported mechanisms for storing data on
the client: cookies and Web Storage. Many say that Web Storage is the evolution of
cookies, but in reality, cookies may stick around a lot longer than people think. Mainly
because they are much different than Web Storage and implicitly send data back to the
server upon each request through HTTP headers. Cookies are always available on the
server and can be read and written to freely, which is great for user session management
and similar situations. The downside is that you only get 4kb of storage per cookie.
Web Storage is different from cookies in that the stored data is not shared with the server.
You can currently store 5MB of data on the client device with Web Storage, and some
browsers allow up to 10MB of storage with user approval. However, these limits can be
a little misleading. If you try to store 5MB of pure HTML in local storage within WebKit-
based browsers, such as Mobile Safari, you will see that it allows for a maximum of 2.6MB
only. For this, you can thank section 7.4 of the first W3C Working Draft of the Web
Storage specification, which states:
In general, it is recommended that
userAgent
s not support features that control how
databases are stored on disk. For example, there is little reason to allow Web authors to
control the character encoding used in the disk representation of the data, as all data in
JavaScript is implicitly UTF-16.
Although section 7.4 was removed in following drafts, most WebKit browser vendors
have stuck to the UTF-16 implementation of data encoding. Two exceptions, Firefox
and IE, give you the actual 5MB of storage space.
Web Storage offers two storage objects—
localStorage
and
sessionStorage
—both of
which are widely supported from IE8 upward and in all modern browsers, including
mobile devices. (For browsers that don't support Web Storage natively, it includes several
polyfills.) Both storage objects use exactly the same APIs, which means that anything
