HTML5 Web Storage – Introduction

"HTTP cookie (also known as a web cookie, or browser cookie) is used for an origin website to send state information to a user's browser and for the browser to return the state information to the origin site." (Source: Wikipedia)

Nowadays regular web browsing is hard to imagine without the enabled cookies function. All popular websites use cookies for various identifying procedures and functions. Of course you've seen those messages where a website administration is asking you to enable cookies in your web browser for comfortable using their website (in some cases working with certain websites is impossible or at least pointless without having cookies enabled). Cookies have several significant drawbacks, among which are the following ones:

• security - due to the whole idea of storing data, cookies are stored on the user's hard drive as the plain text and there is a big chance that cookies files could be hacked;
• performance - every HTTP request/response between server / browser decreases website's performance speed;
• size limit - usually cookies are limited to 4096 bytes in size and 300 maximum cookie count per one domain;

HTML5 Web Storage Instead of Cookies

Considering the drawbacks that we've mentioned above it is obvious that web developers have started seeking for a new and efficient solution. Currently this solution is HTML5 web storage, and judging from the popularity of HMTL5 as a technology and HTML5 templates as design solutions for the new web, we definitely can tell that HTML5 web storage has a great future. This new technology or storage has two key features that will make you forget about cookies:

• huge amount of space: now you can store much more useful information on the user's hard drive including some localization data, temporary storage etc.
• simple API: developers can easily set up key/value pairs on the fly.

According to the W3C specification draft, there are two types of web storage and these are local storage and session storage. HTML5 web storage reduces a huge number of server requests and now personal data will be used only when it is being asked for, instead of being requested with every request to the server as it was with the cookies. It means that you can store large amounts of data without affecting the website's performance. HTML5 along with Javascript allow to use more of user's resources without involving server-side programming and databases. Now let's go deeper with these two types.

Local storage uses technogoly similar to Silverlight isolated storage when all data is stored on the client's side. Also local storage has no time limit - basically you can access your personal data anytime you want. Local storage is positioned as a cost-effective alternative to HTTP cookies.

Session storage is used to store the data of one session and it will be deleted when the user closes the browser window. As you may have guessed, the session storage is great for storing data for the websites which are open in one browser window while local storage can span across multiple browser windows.

Web Storage is supported by such browsers as IE8, Firefox 3.5, Safari 4, Google Chrome 4, Opera 10.50 and all of their newer versions. So, if you want to start using web storage API please consider the list of browsers supported.

The usage of HTML5 Web Storage

This technology is great for web developers that create various web applications. Local storage allows you to run applications offline, use data during multiple browsers sessions, save info about the products added to the shopping cart and so on. Before you'll start using web storage objects you must keep in the mind that web storage as well as cookies can be turned off by the user.

Another important detail which concerns the web storage is the ability to store only strings which is a huge drawback so far. Also don't forget about the security issues that might appear while using web storage. Use only secure connections to share improtant information between client's machine and server. That is all for now, good luck and hope to see you soon.

P.S. Don't forget to check out great collection of HTML5 web storage tutorials.