HTML 5 DOM Storage Support

One of the significant 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 the browsers Firefox 3.5 (with 2.0 there is partial support), Safari 4.0 and Internet Explorer 8, in which this support appeared from version beta2. Consider what this technology is, why it is needed and how it works.

Necessity

The need for a client-side data warehouse that the browser provides is long overdue. Over the past few years, web technologies have shifted more and more from the server side to the client side, more and more calculations, data processing and operations are performed on the user's computer, and not on the web server. The cookie mechanism partially solved the data storage problem , but as you know, it has a number of significant limitations and even minuses:

• cookie has a size limit, Internet Explorer up to version 8 allowed storing up to 4 kilobytes of data in a cookie, in the eighth version this bar is 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 a user works with the website through two tabs, he uses the same cookie data. This point may interfere with 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 along with requests;
  
• two mechanisms localStorage and sessionStorage allow flexible data management, the sessionStorage context and its data exist for only one tab, and if the user closes it or opens another tab, 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 specification of Web Storage, the browser must implement the following three objects for working with local storage:

• storage - is an object that accesses the data set of the storage. According to the specification, the data set should be a pair of key-value strings. Data other than string should be cast to strings before saving to storage;
  
• window.sessionStorage - returns an object of type storage and represents the storage of a user data set that exists and is relevant for only one browser tab until it is closed;
  
• window.localStorage - similar to sessionStorage except 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 window.globalStorage object, not described in the standard .

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, gets, or removes a new data item;
  
• clear - “erases” all storage data;
  
• length - returns the number of stored data items;

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

Example

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

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

Please note that you can create and access data in DOM Storage repositories not only through indexers like sessionStorage ['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 for the subdomain and for the parent domain, say the following example when working with the test.example.com domain will work:

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


However, test.example.com does not have access to other subdomains, 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, which is fully supported by Internet Explorer 8. Unfortunately, not all browsers support DOM Storage, for example, Chrome and Opera browsers do not support it . This impedes to some extent the spread of technology, which can be very useful in developing client-side web pages with rich functionality.

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

Additional Information

MSDN article about DOM Storage http://msdn.microsoft.com/en-us/library/cc197062(VS.85).aspx
How I do video 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/
Browser comparison by functionality http://robertnyman.com/javascript/ 
DOM Storage in the wiki http: // en .wikipedia.org / wiki / DOM_storage
Draft Web Storage Specification http://dev.w3.org/html5/webstorage/