HTML5 Session Storage

by Rajdeep Chandra

HTML

<section id="left">
<form action="">
  <p>One (Key):<input type="text" value="name" id="one"/></p>
  <p>Two(Value):<textarea id="two"></textarea></p>
  <p><input type="button" value="Save" id="button"/></p>
  </form>
</section>
<section id="right">Nothing here</section>

CSS

#left,#right{float:left}
#left{border:3px solid red;padding:10px;margin-right:10px}
#right{border:3px solid blue;padding:10px;min-width:200px;height:100px}

JavaScript

function doFirst(){
  var button = document.getElementById('button');
  button.addEventListener('click', saveAll, false);
}
function saveAll(){
  var one = document.getElementById('one').value;
  var two = document.getElementById('two').value;
  sessionStorage.setItem(one,two);
  display(one);
}
function display(one){
  var right = document.getElementById('right');
  var two = sessionStorage.getItem(one);  
  right.innerHTML = "The name is:"+one+"</br>Value:"+two;
}
//call the function on window load
window.addEventListener('load', doFirst, false);