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”);
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”);
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
//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”);
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
//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”);
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 .
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
No comments:
Post a Comment