Session storage

ZenRays 02:40 Add Comment Edit

Html5 introduced web storage techniques to allow the data to be saved on the client device. Local storage and session storage are the two types of web storage. The main difference between them is that the session storage is available till the browser window is open. If the window is closed, the storage associated with that window will also be closed. Local Storage is opposite of session storage. The data stored in the browser will remain even if the window is closed.

Session storage is Key/value hash table to store data. This storage is not persistent and goes off if the tab is closed or the browser is closed. It is scoped to a domain name. The data stored in one domain will not be available to other domains or web pages. It can only store string values.

sessionStorage.setItem('key',somevalue); It is the method used to store a value with the key provided. For example, sessionStorage.setItem('key',zenrays);

sessionStorage.getItem('key'); It is the method used to get the item which was stored before. For example, sessionStorage.getItem(zenrays);

sessionStorage.removeItem('key'); It is the method used to remove the item which was stored. For example, sessionStorage.removeItem(zenrays);

sessionStorage.length - It returns the number of items stored.

sessionStorage.key(index) - It returns the key stored at particular index

Below is the code for session storage:

<!doctype html>
<html>
<head>
<title> Session ex</title>
<style type="text/css">
 #result{
  border: 1px solid blue;
  padding: 10px;
  margin: 15px;
 }
 #display{
  border: 1px solid blue;
  padding: 10px;
  margin: 15px;
 }
</style>
</head>

<body>
 <div id="result"></div>
 <div id="display"></div>
 <script type="text/javascript">

 function store()
 {
  if(typeof(Storage)!==undefined)
  {
   var val=document.getElementById("val").value;
   sessionStorage.setItem('msg',val);
   document.getElementById("result").innerHTML='the value is stored in session storage';
  }else
  {
   alert("no support available");
  }
 }

 function display()
 {
  document.getElementById("display").innerHTML='storage set and value is '+ sessionStorage.getItem('msg');
 }
 </script>
 <label for="val">enter the value to store in local storage</label>
 <input type="text" id="val">
 <button onclick="store()">store the value</button>
 <button onclick="display()">display stored value</button>

 </body>
 </html>

The output for the above code is:

But if the tab or browser is closed, data stored is lost.That's the main difference between local and session storage. Html5 has many new features other than storage, if you want to learn more about it, you can attend training on Html5

ZenRays provide the following to make you expert

zenrays providing html5 training in Bangalore

Fully practical and project-based sessions from first class.
Training by Experienced Consultants, not regular Trainers
Friendly and enthusiastic faculty to clear your doubts 24X7
Free Live project after the training to get you industry experience

If you want more details please visit us:

Zenrays.com Reach us at trainings@zenrays.com

ABOUT THE AUTHOR

Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible