HTML5 - Introduction
HTML5 - New Elements
HTML5 - Removed Elements
HTML5 - Browser Check
Tag Name : local-web-storage
Cookies has been the way of storing small amounts of data on client (user) computers. HTML5 provides an efficient alternative to this practice. This mechanism is called Local Web Storage or simply Web Storage and is more faster and secure compared to cookies. This mechanism allows for the storage of large amounts of data with out compromising on the performance. Since the data is not transmitted with every request, the security element is enhanced. Data is used only when it is requested. It also restricts a page to access the data stored by itself.
Web Storage comes in two flavors : 1) Local and 2) Session based data storage. In the first kind, the data is stored for good. In case of the latter, the session storage, data gets erased as soon as the browser session ends. i.e., the browser is closed.
In the Local Storage Example below, enter a name and click on the button, the data is stored to the local storage. Close the browser and reload the page, the name field gets pre-populated with the data stored in the local storage.
In case of the second example (Session Storage), after the browser is closed and re-opened, data stored to the session storage is lost.
Local Storage Example :
HTML Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>



Your Name : <input type=text name=userNameLocal id=userNameLocal size=120>
<button onclick="storeName_local()" type="button">Click to Store Name to Local Storage</button>

<script>

if(typeof(Storage)!=="undefined")
{
if (localStorage.userNameLocal){
document.getElementById("userNameLocal").value=localStorage.userNameLocal;
}
}


function storeName_local()
{
if(typeof(Storage)!=="undefined")
{
localStorage.userNameLocal=document.getElementById("userNameLocal").value;
alert ("data stored to local web storage");
}
else
{
document.getElementById("userNameLocal").value="HTML5 Local Storage Support Not Available.";
}
}

</script>
</body>
</html>
Output :
Your Name :
Session Storage Example :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>



Your Name : <input type=text name=userNameSession id=userNameSession size=120>
<button onclick="storeName_session()" type="button">Click to Store Name to Session Storage</button>

<script>

if(typeof(Storage)!=="undefined")
{
if (sessionStorage.userNameSession){
document.getElementById("userNameSession").value=sessionStorage.userNameSession;
}
}


function storeName_session()
{
if(typeof(Storage)!=="undefined")
{
sessionStorage.userNameSession=document.getElementById("userNameSession").value;
alert ("data stored to session web storage");
}
else
{
document.getElementById("userNameSession").value="HTML5 Local Storage Support Not Available.";
}
}

</script>

</body>
</html>
Output :
Your Name :

© 2010 www.generalconnection.com. All rights reserved. | www.generalconnection.com