The sessionStorage object is used to store data till duration of the browser session. Now create a web page named sessionStorage.html to implement session storage.
//////////sessionStorage.html file///////////////
<!doctype html>
<head>
<title>Working with session Storage example</title>
<style type="text/css">
#todolist{
width:350px;
height:200px;
font:normal 14px Arial;
background:lightyellow;
border:5px groove gray;
overflow-y:scroll;
padding:4px;
}
#todolist ol{
margin-left:-15px;
}
#todolist li
{
border-bottom:1px solid gray;
margin-bottom:8px;
}
</style>
</head>
<body>
<div id="todolist" contentEditable="true">
<div contentEditable="false"><b>Enter Your tasks in the following TO DO LIST:</b></div>
<ol>
<li>Take breakfast in PQR hotel</li>
<li>Meeting with Aggrawal And Group Company Manager</li>
<li>Set alarm to 5:30 am</li>
</ol>
</div>
<input type="submit" value="Reset TO DO LIST" onClick="resetlist();return false">
<script type="text/javascript">
var defaulthtml='<div contentEditable="false"><b>Enter your tasks in the following TO DO LIST:</b></div>\n'
defaulthtml+='<ol>\n'
defaulthtml+='<li>Take breakfast in PQR hotel</li>\n'
defaulthtml+='<li>Meeting with Aggrawal and group company manager</li>\n'
defaulthtml+='<li>Set alarm to 5:30am </li>\n'
defaulthtml+='</ol>'
function resetlist(){
todolistref.innerHTML=defaulthtml
domstorage.todolistdata=defaulthtml
}
var todolistref=document.getElementById("todolist")
var domstorage=(window.sessionStorage)? sessionStorage[location.hostname]:null
if(domstorage){
if(domstorage.todolistdata){
todolistref.innerHTML=domstorage.todolistdata
}
todolistref.onkeyup=function(e)
{
domstorage.todolistdata=this.innerHTML
}
}
</script>
</html>
A to do list area is created in which we can list the daily routine tasks. the sessionStorage object is used to store the details that we enter in the list.
Note: that the list is maintained till your browser window remains opened.
The OUTPUT of the Above Web Page is:
Enter a few entries in TO DO LIST as shown below :--
//////////sessionStorage.html file///////////////
<!doctype html>
<head>
<title>Working with session Storage example</title>
<style type="text/css">
#todolist{
width:350px;
height:200px;
font:normal 14px Arial;
background:lightyellow;
border:5px groove gray;
overflow-y:scroll;
padding:4px;
}
#todolist ol{
margin-left:-15px;
}
#todolist li
{
border-bottom:1px solid gray;
margin-bottom:8px;
}
</style>
</head>
<body>
<div id="todolist" contentEditable="true">
<div contentEditable="false"><b>Enter Your tasks in the following TO DO LIST:</b></div>
<ol>
<li>Take breakfast in PQR hotel</li>
<li>Meeting with Aggrawal And Group Company Manager</li>
<li>Set alarm to 5:30 am</li>
</ol>
</div>
<input type="submit" value="Reset TO DO LIST" onClick="resetlist();return false">
<script type="text/javascript">
var defaulthtml='<div contentEditable="false"><b>Enter your tasks in the following TO DO LIST:</b></div>\n'
defaulthtml+='<ol>\n'
defaulthtml+='<li>Take breakfast in PQR hotel</li>\n'
defaulthtml+='<li>Meeting with Aggrawal and group company manager</li>\n'
defaulthtml+='<li>Set alarm to 5:30am </li>\n'
defaulthtml+='</ol>'
function resetlist(){
todolistref.innerHTML=defaulthtml
domstorage.todolistdata=defaulthtml
}
var todolistref=document.getElementById("todolist")
var domstorage=(window.sessionStorage)? sessionStorage[location.hostname]:null
if(domstorage){
if(domstorage.todolistdata){
todolistref.innerHTML=domstorage.todolistdata
}
todolistref.onkeyup=function(e)
{
domstorage.todolistdata=this.innerHTML
}
}
</script>
</html>
A to do list area is created in which we can list the daily routine tasks. the sessionStorage object is used to store the details that we enter in the list.
Note: that the list is maintained till your browser window remains opened.
The OUTPUT of the Above Web Page is:
Enter a few entries in TO DO LIST as shown below :--
No comments:
Post a Comment