Local & Session Storage in HTML5

With the help of HTML5, a website can store data up to 10MB size in the browser in `Local’ or `Session Storage’.

For dynamic websites, data will be huge and stored on the server side in Memcache or Page Caching, Sessions or Cookies. However, since Cookies & Sessions are limited and append all data into one string, it is difficult to store data in Cookies and Sessions.

Moreover, this method will delay the page load time, and some CPU process is required to process it.  Until now, websites were storing common data either in SESSIONS or COOKIES or static files coming from CDN. With the release of HTML5, we have got lots of new properties, attributes, async, local, sessions storage  and similar functionalities.

By using Local/Session Storage, we can store up to 10MB data in browser’s memory. Almost all modern browsers supports local/session storage. Difference between Local Storage and Session storage is on closing browser/tab, Session Storage will be removed whereas  Local Storage data will remain in the browser until the user physically deletes it or removes the same using removeItem option.

<table> <caption> <abbr>HTML5</abbr> Storage support </caption> <thead> <tr> <th title="Internet Explorer">IE</th> <th title="Mozilla Firefox">Firefox</th> <th title="Apple Safari">Safari</th> <th title="Google Chrome">Chrome</th> <th>Opera</th> <th>iPhone</th> <th>Android</th> </tr> </thead> <tbody> <tr><td>8.0+</td><td>3.5+</td><td>4.0+</td><td>4.0+</td><td>10.5+</td><td>2.0+</td><td>2.0+ </td></tr></tbody></table>

Local Storage has three fantastic methods to set, get and delete the Local/Session Storage data from client’s browser.

How to Set data into Local Storage

To set data onto browser, HTML5 provides localStorage.setItem() Method.

<script>
 if(window.localStorage){
 try{
 window.localStorage.setItem(key, data );
 }catch(e){
 return false;
 }
 }
 </scirpt>

To explain briefly, in the above example, we are checking whether your browser supports for local storage or not. If, in case,  your browser supports, then we are setting data with the help of window.localStorage.setItem(key,data).

Here, the first parameter is key of the data and data is actual data that is to be stored in browser.

Example:

<script>
 var key = 'list-of-counties'
 var data = '[{"1":"US"},{"2":"UK"},{"3":"India"}]';
 if(window.localStorage){
 try{
 window.localStorage.setItem(key, data );
 }catch(e){
 return false;
 }
 }
 </scirpt>

In the above example, we are storing country list in browser. Country List is a  json data with is common for all page in the website. Once data is stored, we can verify whether data is set or not in the browser by looking at the browser.

For example, go to Browser’s console ( ctrl+f12 ) –> Under Resources –> Local Storage –> your site name –> look at your key.

If you found the data that means your browser is supporting Local Storage. Else try with latest version or modern browsers like chrome, firefox or IE8+

Apart from Objects, you can store any data in your local storage.

Reading/Accessing Data from Local Storage

Once data is set, now we need to read it from browser’s memory. For reading data, HTML5 Provides localStorage.getItem(key) Method. The following example shows how to retrive data from local storage.

<script>
 if(window.localStorage){
 try{
 var data = window.localStorage.getItem(key);
 return data;
 }catch(e){
 return false;
 }
 }
 </scirpt>

window.localStorage.getItem(key), key is the actual key on which we have set the data to store.

Delete or Remove Data from Local Storage

After setting and getting data from browser, if you feel that the data is useful any longer and decide to delete, then you can remove the same using localStorage.removeItem(key)

<script>
 if(window.localStorage){
 try{
 window.localStorage.removeItem(key);
 }catch(e){
 return false;
 }
 }
 </scirpt>

Detailed example of Local Storage and Session Storage

Suppose you want to set country list of data which is common throughout the website, you can make it as json data and set into local storage of your browser.

<script>

var key = ‘country-data’;
var data = ‘[{“1″:”US”},{“2″:”UK”},{“3″:”India”}]’;

setLocalStorageData(key,data);

var storedData = ”;

storedData = getLocalStorageData(key);

removeLocalStorageData(key);

function setLocalStorageData(key,data){
if(window.localStorage){
window.localStorage.setItem(key, data);
return true;
}
return false;
}

function getLocalStorageData(key){
return window.localStorage.getItem(key)
}

function removeLocalStorageData(key){
window.localStorage.removeItem(key)
}

</scirpt>

Note: Storing Data in Local/Session Storage is safe unless it’s not confidential data.