HTML5 Local Storage Tutorial


HTML5 Local Storage Tutorial



What is HTML5 Local Storage?

Html5 comes with new functionality to store data localy on client side machine (browser, web view app,cordova based apps) with the help of local storage we can store value in browser by (key=value) Pair .

Local Storage Can Store data Upto 5 Mb.

Local Storage Object

Local Storage has two types of Objects

1. window.localStorage – Store Data Without Any expiration datetime.
2.window.sessionStorage - Stores Data Until a Session (Data Will we lost if browser or tab will closed).

Code 1. (Check Local Storage Supported Or Not)
Here First We Will Check Local Storage is supported by Browser or not.
<html>
<head>
<script>
if (typeof(Storage) !== "undefined")
{
console.log(“Storage Supported”);
//Open Your Console By Clicking On F12 it Will print supported means your
//browser suppored local storage
//here we write our code
}
else
{
console.log(“Storage Supported”);
//browser not suppored local storage
}
</script>
</head>
<body>
<h1>Local Storage Tutorial</h1>
</body>
</html>
Code 2.(Set Value Using local Storage )
Here we will set value in local storage using local storage object.
<html>
<head>
<script>
if (typeof(Storage) !== "undefined")
{
localStorage.setItem("userame", "John");
//Set value in localstorage
//here we write our code
//username is key
//john is our value which we want to set
}
else
{
console.log(“Storage Supported”);
//browser not suppored local storage
}
</script>
</head>
<body>
<h1>Local Storage Tutorial</h1>
</body>
</html>
Code 3.(Get Value Using local Storage )
Here we will set value in local storage using local storage object.
<html>
<head>
<script>
if (typeof(Storage) !== "undefined")
{


localStorage.setItem("userame", "John");
//Set value in localstorage
var a=localStorage.getItem("userame");
document.write(“username is “ +a);
//get value from local storage
//here we write our code
}
else
{
console.log(“Storage Supported”);
//browser not suppored local storage
}
</script>
</head>
<body>
<h1>Local Storage Tutorial</h1>
</body>
</html>
Note : - Generally We Use Localstorage in Cordova based application where we store login details in app when user come again then do need to login agian we check its old value from local storage and used it login again without taking from user input.
Thank you .
Previous Post
Next Post

post written by:

0 comments: