What is web storage in HTML5?

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 accessany of the previously stored data. Session storage is suitable for a single transaction. Local storage, unlike session storage, stores data across multiple instances of the browser and also beyond the current session. In summary, web storage is good choice if

• You need to store data exceeding the size limits of cookie-based storage.
• You don’t need to pass data to and from the server with every request.
• You don’t need to set any specific expiration time for the data.

However, web storage may not be a good choice if

• You wish to store a huge amount of data.
• Your data can’t be easily stored as key-value pairs (binary data or BLOBS, for example).
• Data to be stored is sensitive.