The local storage is same as the session storage except for the feature of persistency. In other words local storage stores the saved data on user's computer even after closing the browser window. Now create a Web page named localstorageexample.html to show how to implement local storage.
//////////localStorageexample.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=windo.localStorage||(window.globalStorage?
globalStorage[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 localStorage object is used to store details that you enter in the list. However the list is maintained till your browser window is closed and reopened.
The OUTPUT of the above Web page is:
//////////localStorageexample.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=windo.localStorage||(window.globalStorage?
globalStorage[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 localStorage object is used to store details that you enter in the list. However the list is maintained till your browser window is closed and reopened.
The OUTPUT of the above Web page is:
No comments:
Post a Comment