0
How to store data locally in HTML5 without using any server side languages?
How to store data locally in HTML5 without using any server side languages?
1 Answer
1
“Using WebStorage API”
WebStorage is a powerful API by which you can store the data locally within the user’s browser. Before the HTML5, session & cookies are used to manage by the server side language. But webstorage increase the speed and performance of the webpage because it stores the data locally on the browser & also stores the unlimited amount of data without affecting website performance.
Unlike cookies, the storage limit is for larger (at least 5MB) and the information is never transferred to the server.
WebStorage performs by the help of “Storage” class in two formats.
- localStorage
- sessionStorage
localStorage :
It works as cookie’s, that stores data permanently and the expiration time is zero.
sessionStorage :
In sessionStorage, the information stored as a session and the expiration time is till when the browser is open.
Function of WebStorage Class :
1. setItem()
Syntax :-obj.setItem(“key”,”value”);
2. getItem()
Syntax :- Variable name=obj.getItem(“key”);
3. removeItem()
Syntax:- obj.removeItem(“key”);
Example :- Store user name & password using localStorage API.
<html>
<head>
<script>
function setInfo()
{
if(Storage)
{
localStorage.setItem("user",t1.value);
localStorage.setItem("pass",t2.value);
}
else
document.write("<h1>Browser Can't Support WebStorage.....</h1>");
}
function getInfo()
{
if(Storage)
{
var u=localStorage.getItem("user");
var p=localStorage.getItem("pass");
document.write("<h1> Welcome User "+u+" Your Password Is "+p+"</h1>");
}
else
document.write("<h1> Browser Can't Support WebStorage.....</h1>");
}
function delInfo()
{
var u=localStorage.getItem("user");
var p=localStorage.getItem("pass");
if(u!=null && p!=null)
{
localStorage.removeItem("user");
localStorage.removeItem("pass");
document.write("<h1> Information is Removed </h1>");
}
else
document.write("<h1>Information is Not Found in Browser ....</h1>");
}
</script>
</head>
<body>
<center>
<form onSubmit="setInfo();">
User Name : <input type="text"name="t1"id="t1"><br><br>
Password : <input type="password"name="t2"id="t2"><br><br>
<input type="submit" value="Login">
</form>
<input type="button"value="Display Info"onClick="getInfo();">
<input type="button"value="Delete Info"onClick="delInfo();">
</center>
</body>
</html>
Example :- Count total number of click using session storage.
<html>
<head>
<script>
function count()
{
if(Storage)
{
document.fgColor="white";
document.bgColor="blue";
if(localStorage.clickcount)
{
localStorage.clickcount=parseInt(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=0;
}
document.getElementById("res").innerHTML=localStorage.clickcount;
}
else
document.write("Browser Doesn't Support Web Storage......");
}
function delCount()
{
if(Storage)
{
if(localStorage.clickcount)
localStorage.clickcount=0;
document.getElementById("res").innerHTML=localStorage.clickcount;
// alert("Local Storage Value is Zero...");
}
else
document.write("Browser Doesn't Support Web Storage......");
}
function countSession()
{
if(Storage)
{
document.fgColor="white";
document.bgColor="pink";
if(sessionStorage.clickcount)
{
sessionStorage.clickcount=parseInt(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=0;
}
document.getElementById("res").innerHTML=sessionStorage.clickcount;
}
else
document.write("Browser Doesn't Support Web Storage......");
}
</script>
</head>
<body>
<center>
Total No. of Click : <div align="center" id="res"></div><br>
<input type="button"value="Count Click" onClick="count();">
<input type="button"value="Delete Click" onClick="delCount();">
<input type="button"value="Count Session" onClick="countSession();">
</center>
</body>
</html>
"Thanks!!! for Reading"
