HTML and CSS Reference
In-Depth Information
chapter 7
n n n
Storing Data in Web Storage
Most of the web sites developed today deal with data in one form or another. Naturally, this application
data needs some sort of storage mechanism. As far as the server is concerned, there are sophisticated
database engines such as SQL Server. However, storing data on the client side can be tricky. Traditionally,
developers used cookies to persist data on the client side, but cookies suffer from their own limitations. To
provide a streamlined data-storage mechanism at the client side, HTML5 provides web storage. This
chapter examines what web storage is along with situations where it can be used. Specifically, you learn
the following:
• What is web storage?
• Flavors of web storage
• Storing items in, retrieving them from, and removing them from web storage
• Storing non-string data in web storage
• Passing data from web storage to the server for further processing
Overview of Web Storage
The term
web storage
refers to HTML5's client-side data-storage mechanism. Web storage allows you to
store data on the client side as key-value pairs. The W3C recommended a web storage size limit of 5MB per
origin (see the section “Security Considerations for Web Storage” to learn more about origins). However,
individual browsers may slightly deviate from this limit. For example, IE8 allows web storage of up to
10MB.
Although both web storage and cookies store data on the client side, they work differently. Cookies are
passed between client and server with each and every request from a given web site. On the other hand,
web storage is never passed to the server automatically. If you need to transmit data from web storage to
the server-side code, you must resort to a programmatic approach such as jQuery calling server-side code
or a hidden form field. Additionally, unlike cookies, you can't set an expiration time for web storage. You
either need to write code to delete stale items or count on the user to delete the stale items using an option
in the browser.
Web storage comes in two flavors: session storage and local storage. These two types are exposed as
sessionStorage
and
localStorage
attributes of the
window
object, respectively. As you might have guessed,
session storage is persisted as long as the current browser (or its tab) instance is running. The moment you
close the browser instance (or tab), the data is removed. If you load the web site again later, it can't access
