HTML 5 support DOM Storage

One of the major innovations in Internet Explorer 8 is support for DOM Storage technology, which is part of the new technologies of the upcoming HTML 5 standard. Dom Storage (or as it is also called Web Storage) is a mechanism that is designed to provide developers with the ability to store a significant amount of data on the client side and access them using a special API. At the moment, full support for DOM Storage is implemented in Firefox 3.5 browsers (with 2.0 there is partial support), Safari 4.0 and Internet Explorer 8, in which this support appeared from the beta2 version. Consider what this technology is, what it is for and how it works.

Need

The need for data storage on the client side, which the browser provides is long overdue. The last few years, web-technologies are increasingly shifting from the server side to the client, more and more calculations, data processing and operations are performed on the user's computer, and not on the web server. Part of the problem with data storage was solved by the cookie mechanism, but as you know, it has a number of significant limitations and even minuses:

• The cookie has a size limit, Internet Explorer up to version 8 allowed us to store up to 4 kilobytes of data in the cookie, in the eighth version this bar was raised to 10 kilobytes, but still this size is a significant drawback;
  
• cookie data is involved in the formation of each request to the server, that is, with each request to the server, all cookies are automatically sent along with the request, which increases traffic;
  
• cookies are mapped to a website and, if the user works with the website through two tabs, he operates with the same cookie data. This point can disrupt the proper operation of the site and limits the use of cookies.

On the other hand, the DOM Storage mechanism in Internet Explorer offers the following features:

• up to 10 megabytes for storing data for each site (5 Mb in Firefox);
  
• access only on the client side, DOM Storage data is not sent with requests;
  
• two localStorage and sessionStorage mechanisms allow flexible data management, the sessionStorage context and its data exist only for one tab, and if the user closes it or opens another one, the data from the tab will not be available.

* localStorage appeared in Firefox 3.5, sessionStorage has been present in Firefox since version 2.0.

API

According to the draft Web Storage specification, the browser must implement the following three objects for working with local storage:

• storage is an object that accesses a storage data set. According to the specification, the data set must be a pair of key-value strings. Data other than string should be brought to the lines before being stored in the repository;
  
• window.sessionStorage - returns a storage object and is a storage of a user dataset that exists and is relevant only for one browser tab until it is closed;
  
• window.localStorage is similar to sessionStorage with the exception that the data of this storage is saved after closing the tab and is always available, which makes this object look like a cookie. Each domain and subdomain has its own window.localStorage object.

* Firefox supports another, not described in the standard, the window.globalStorage object .

In fact, when working with data, saving or retrieving from storage, the developer operates with an instance of the storage object, which has a number of auxiliary functions and properties:

• setItem, getItem, removeItem - creates, receives or deletes a new item of data;
  
• clear - “erases” all data storage;
  
• length - returns the number of stored data items;

* Internet Explorer 8 offers another useful property of remainingSpace, which allows you to find out the amount in bytes that the storage takes up. So far, this property is not included in the draft specification and is not standard.
')

Example

The simplest example of working with localStorage, the data is saved and retrieved from the repository:

...
sessionStorage.someDataKeyName = 'data';
...
var data = sessionStorage.someDataKeyName;
...

Note that you can create and access data in DOM Storage repositories not only through sessionStorage type indexers [' someDataKeyName '], but also through pseudo-properties. The first attempt to write data to such a property will create an instance of it in the repository.

The data of the window.localStorage object can be accessible both to the subdomain and to the parent domain, say the following example when working with the domain test.example.com will work:

...
var someStorage = localStorage ['example.com element'];
...


However, there is no access to other subdomains of test.example.com, the following example for the test.example.com context is incorrect:
...
var someStorage = localStorage ['element mail.example.com'];
...

Conclusion

In this article I tried to consider the relatively new DOM Storage mechanism, which is part of HTML 5 fully supported by Internet Explorer 8. Unfortunately, not all browsers support DOM Storage, for example, Chrome and Opera browsers do not have support. This to some extent prevents the spread of technology, which can be very useful in developing client web pages with rich functionality.

DOM Storage helps to work with data on the client side and replaces the cookie mechanism used for this purpose earlier. By removing the restrictions defined by the cookie mechanism, DOM Storage offers an equally simple and efficient way to store data.

Additional Information

An MSDN article describing the DOM Storage http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx
Video How I do on MSDN with description http://msdn.microsoft.com/en-us/ie/dd535732.aspx
John Resig article on DOM Storage http://ejohn.org/blog/dom-storage/
Comparison of browsers in functionality http://robertnyman.com/javascript/
DOM Storage on the wiki http://en.wikipedia.org/wiki/DOM_storage
Draft Web Storage Specification http://dev.w3.org/html5/webstorage/