Friday, January 18, 2013

web storage

0 comments

Web Storage

Before start,What is storage? It means to save or store something in a place.So web storage means to store data on somewhere.Typically data is stored in database.But web page is run by browser and it have no capacity to hold data.Web storage means store data in browser rather than database.Previously web developer do that kind of work with the help of cookies but it have many limitation such as it can store only 4 kb,communicate to server every HTTP request and many which slow the web site performance.On the other hand web Storage do not communicate with server until it have been called.It can store a large amount of data on the browser.The data may infinitely store and there have no expire date.There are two kind of web storage are available on this API.

1.localStorage
2.sessionStorage

Difference between them

Both of them run in same function and rules but persistence duration is vary from one to another.Local Storage is like permanent web storage and it will remain where or not browser closed.But session storage only stay until a window is close.If window close then session storage will destroy.

Importance of Web storage:

For many reason web storage is very helpful.When a user filling up a long form for purchase something during that time if he unable to post it to server for internet connection problem or unexpectedly his or her browser restart or resfresh.Then he or she might have filled up that from from scratch.That would be disappoint for user.But if we give him his data back when he come back this is very helpful and user friendly.
We can use web storage in shopping cart each time user add a product it goes to database virual table and store there until he purchased or close it.But this sometime slow down website speed and cause very much presser to server.So we can handle this kind of small thing in browser.

 Functionality of Web storage

Key pair:

Browser store data on key pair value.Key means name of something and pair means its value.Suppose if you want to store user name on web storage during form fill up.Then name would be the key and its value would be 'Osman' or input value.

save: 

There are three ways to save data on web storage.Like 
window.localStorage.setItem(key,value);
(like window.localStorage.setItem("name","Tuhin");)

       window.localStorage.key="value";
          window.localStorage[key]="value";

Here localStorage is a child of window object.Among the above three method i prefer to use the first one because it is casual.

Restore Item

You can restore any saved item from web browser.Remember local storage is browser own member space.So if you store something on Google Chrome on your pc then this data would not have in FireFox browser.
window.localStorage.getItem(key);
    
if we write window.localStorage.getItem("name") here name key is stored previously so we want to restore it and use in web page.It definately give us the value it has.

Check Length:

You can check how any key pair have in web storage by 
window.localStorage.length; 
This will give you numeric number.

Remove item:

You can delete any individual item from web storage by following method.
window.localStorage.removeItem(key);
if we give name in key then it will remove name key from web storage.

Clear All

We can clear all of the key value from web storage.
window.localStorage.clear();

Practical Project:

This code is Jquery Based.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form_input_storage</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<style type="text/css">
#holder{ 
width:500px;
height:auto;
background-color:#6CF;
padding:20px;
}
label{ 
width:150px;
display:inline-block;

}
p{ 
font-family:"Courier New", Courier, monospace;
border-bottom:1px dashed #900;
}
</style>
<script type="text/javascript" >
window.onload=function(){
if(window.localStorage)
{
/*var name=document.getElementById("name");
name.addEventListener("blur",function(){
localStorage.name=name.value;
}); */

$("#name").on("blur",function(){
localStorage.name=$(this).val();
});
window.localStorage.name;
if(window.localStorage.name){
document.getElementById("name").value=window.localStorage.getItem('name');
}
//This is form email address;
$("#email").on("blur",function(){
localStorage.email=$(this).val();
});
if(window.localStorage.email){ 

document.getElementById("email").value=window.localStorage.getItem('email');
}
//This is for age
$('#age').on("blur",function(){
localStorage.age=$(this).val();
});
if(localStorage.age){document.getElementById("age").value=window.localStorage.getItem('age'); }
//CIty
$('#city').on("blur",function(){
localStorage.city=$(this).val();
});
if(localStorage.city){document.getElementById("city").value=window.localStorage.getItem('city'); }


//For telephone Number

$('#telephone').on("blur",function(){
localStorage.telephone=$(this).val();
});
if(localStorage.city){document.getElementById("telephone").value=window.localStorage.getItem('telephone'); }
//For web site Url

$('#web').on("blur",function(){
localStorage.web=$(this).val();
});
if(localStorage.city){document.getElementById("web").value=window.localStorage.getItem('web'); }

//For Comments

$('#comment').on("blur",function(){
localStorage.comment=$(this).val();
});
if(localStorage.city){document.getElementById("comment").value=window.localStorage.getItem('comment'); }




}
else
{
alert("sorry your browser does not souuprt local storage")
}
}
</script>

</head>

<body>
<div id="holder">
<form action="#" name="check" method="post">
<p><label>Name</label><input type="text" name="name" id="name" value="" /></p>

<p><label>Email Address</label><input type="email" name="email" id="email" /></p>
<p><label>Age</label><input type="number" name="age" id="age" /></p>
<p><label>City</label><input type="text" name="city" id="city" /></p>
<p><label>Telephone Number</label><input type="tel" name="telephone" id="telephone" /></p>
<p><label>Website</label><input type="url" name="url" id="web" /></p>
<p><label>Comments</label><textarea id="comment" name="com"></textarea></p>
<input type="submit" name="action" value="SEND" " />
</form>
</div>


</body>
</html>


Tips:Remeber web storage only work on server you must to run this file from a server it would be real server or localhost server like Xampp or Wamp.

This Code is Javascript Based


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>web storage</title>
<style type="text/css">
#container{ 
background-color:#CCF;
width:600px;
height:500px; 
padding:25px;

}
label{ 
display:block;
width:130px;
float:left;


p{ 
border-bottom:1px dashed #FFF;

}
</style>
<script type="text/javascript">

 function saving(){ 
 var name=document.getElementById("name").value;
 var email=document.getElementById("email").value;
 window.localStorage.setItem(name,email);  
 }

 function counts()
 {
var cou=window.localStorage.length;
//alert("There are  "+cou+" items on your local storage");
document.getElementById("showcount").innerHTML="There are "+cou+"items on your local storage";
 
 
 }
 //clear all of the browser data from local storage
 function clearAll()
 { 
 var clear=window.localStorage.clear();
 document.getElementById("showcount").innerHTML="You successfully deleted all of the data from local storage." 

 
 
 }
 //for delete individual item from local storage
 function deleteOne(){
  var del=document.getElementById("name").value;
  window.localStorage.removeItem(del);
  document.getElementById("showcount").innerHTML="You have successfully deleted "+del+" information from local storage";  
 }
 function shows()
     {  
var cnt=window.localStorage.length;
var rst="The List is <br ><ul>";
for( var i=0;i<=cnt;i++)
   {
var key=window.localStorage.key(i);
var val=window.localStorage.getItem(key);
rst+="<li>"+key+"||"+val+"</li>";
     }
rst+="</ul>";
document.getElementById("showMsg").innerHTML=rst; 
    }





function onLoad() {
   document.getElementById("store").addEventListener("click", saving, true);
   document.getElementById("count").addEventListener("click", counts, true);
  document.getElementById("clear").addEventListener("click", clearAll, true);
   document.getElementById("delete").addEventListener("click", deleteOne, true);
   document.getElementById("show").addEventListener("click", shows, true);
   
   
}

window.addEventListener("load", onLoad, true);

</script>
</head>

<body>
<div id="container">
<p>
<label>Name:</label><input type="text" name="name" id="name">
</p>
<p>
<label>Email address:</label><input type="email" name="email" id="email">
</p>
<p align="center">
<input type="button" id="store" value="Store" />
<input type="button" id="count" value="Counts" />
<input type="button" id="clear" value="Clear" />
<input type="button" id="delete" value="Delete" />
<input type="button" id="show" value="Show All" />
</p>
<div id="showMsg">
</div>
<p id="showcount"></p>
</div>

</body>
</html>

HTML 5 syllabus

Web Storage Video Tutorial



Other Resource about Web storage

Comments

0 comments to "web storage"

Post a Comment

 

Copyright 2010 All Rights Reserved E-tech institute of IT.