Session Storage API in HTML 5

In the Local Storage API in HTML 5 , i blogged about localStorage JavaScript object that you can use for storing data on the client side. The data stored using localStorage API would be available across browser restart and all the windows/tabs opened from that domain. The HTML5 specification also provides sessionStorage object that has same interface as the localStorage object with the difference that the data stored using the sessionStorage API stays only during lifetime of browser session, so you will loose it when you close the browser window or even if you open a new browser window. I wanted to try this out so i changed the localStorage code to use sessionStorage instead of localStorage object, my code looks like this

<!doctype html>
<html>
  <head>
    <script>
 window.onload =function(){
      if(window["sessionStorage"]){
      // Inserting or updating a key/value
   var currentTime = new Date();
      sessionStorage.setItem("key1","First test value" + currentTime.getTime() );  
   if(sessionStorage.getItem("key2") == null)
  sessionStorage.setItem("key2","Second test value"+ currentTime.getTime());  

   document.getElementById("key2Value").innerHTML = sessionStorage.getItem("key2");
      // Getting value of key from session storage
      console.log(sessionStorage.getItem("key1"));
      
      //Removing a key from the session storage
      sessionStorage.removeItem("key1");
      console.log(sessionStorage.getItem("key1"));
      
      //Iterate through all the keys and print them in key=value format
      for( var key in sessionStorage)
        console.log(key + " = "+sessionStorage[key]);
      
      //Iterate through all the keys and print them in key=value format
      for (var i = 0 ; i < sessionStorage.length;i++){
        var keyName = sessionStorage.key(i);
        console.log(keyName +" = "+ sessionStorage[key]);
      }  
      
      //Removing everything
    // sessionStorage.clear();
      }else{
        alert("Browser does not support sessionStorage");
      }
   }
    </script>
  </head>
  <body>
 <div id="key2Value"></div>
  </body>
  </html>
I made a change to check value of key2 if it exists do not set the value and display it on page. Then i opened two different tabs in same browser and keep refreshing page i could see that two different tabs got different values for the same key.

3 comments:

srjwebsolutions said...

We are leading responsive website designing and development company in Noida.
We are offering mobile friendly responsive website designing, website development, e-commerce website, seo service and sem services in Noida.

Responsive Website Designing Company in Noida
Website Designing Company in Noida
SEO Services in Noida
SMO Services in Noida

EG MEDI said...

Egmedi.com is online medical store pharmacy in laxmi nagar Delhi. You can Order prescription/OTC medicines online. Cash on Delivery available. Free Home Delivery


Online Pharmacy in Delhi
Buy Online medicine in Delhi
Online Pharmacy in laxmi nagar
Buy Online medicine in laxmi nagar
Onine Medical Store in Delhi
Online Medical store in laxmi nagar
Online medicine store in delhi
online medicine store in laxmi nagar
Purchase Medicine Online
Online Pharmacy India
Online Medical Store

Vikas Chaudhary said...

Battery Mantra is Authorized exide car battery dealer in Noida and Greater Noida. We are providing our service in Indirapuram, Delhi, Ashok Nagar.

Exide Battery Dealer in Noida
Battery Dealer in Noida
Authorized Battery Dealer in Noida
Car Battery Dealer in Noida
Car Battery Dealer
Exide Battery Dealer