Web Storage

Web storage is the simplest form of data storage. Data storage is a way to store data on user's hard drive. There are some non critical data such as user's preferences, recent searches etc. that do not need to be sent to the server or received from the server at every request. These non critical data can be stored at client side to boost the performance of the web site. There are three ways to store data on the client side: Web Storage, Web SQL Database and IndexedDB. In this post we will talk about Web storage.

Web Storage

In web storage a key is associated with a value. Though it looks like cookies, but it is more secure and faster than cookies. Unlike cookies, it allows to define a sessionStorage that only refers to the particular window/tab the user is currently in. Once window/tab is closed, the data disappears. Data doesn't stick around until the entire browser is closed.

There are two forms of Web storage: sessionStorage and localStorage.

When data is created in sessionStorage, it is available only to that window until the window is closed (or session is ended). So when you open another window on the same domain, previous session data will not be available. This way leak of session data is avoided across different windows. Let's see some examples of sessionStorage:

 sessionStorage.itemSelected = 'Game';
 alert("You have selected : "+ sessionStorage.itemSelected);

You can set data in sessionStorage using setItem method. The setItem method takes a key and a value.

 sessionStorage.setItem('itemSelected', 'Reading');
 alert("You have selected : "+ sessionStorage.itemSelected);

Data can be retrieved from sessionStorage using getItem method. The getItem method takes the key and returns the value related to that key.

sessionStorage.setItem('itemSelected', 'Reading');
alert(sessionStorage.getItem(itemSelected));

You can remove data from sessionStorage using removeItem, clear method or directly using deleter. The removeItem method takes the key and deletes the entry, where as clear removes all entries.

sessionStorage.removeItem('itemSelected');
sessionStorage.clear();

When data is put in localStorage, it becomes available on any other window on the same domain. Data in localStorage remains available until it is explicitly deleted either by the web application or by the user. You can get back your saved data in localStorage even if you close the browser or reboot your machine. This way you can persist data without the need of cookies. localStorage has the exact same API like sessionStorage. So if you want to keep data in localStorage, you can use it this way:

localStorage.setItem('itemSelected', 'Reading');
alert(localStorage.getItem(itemSelected));

Web storage is supported on all modern browsers. You can see it here. API signatures are simple. Web storage typically has a limit of 5 MB. If data size goes beyond 5 MB, browsers generally ask the users whether they want to permit the website to go beyond this limit. Another thing to remember when using Web storage, it only supports string-to-string mapping at present. You can use JSON.stringify and JSON.parse to overcome this difficulty.