What is a Web Storage ?
Web Storage is simply called as DOM storage.
In previous approaches, the application data had to be stored in cookies, included in every server request.
Later on HTML5 have introduced the greatest feature called Web Storage.
Web Storage allows us to store the data locally within the user’s browser.
What is the purpose of Web Storage ?
The main purpose is storing the user data locally internally within the user’s browser.
The data stored by Web Storage locally, hence it is faster than cookies storage.
Web Storage can use storage space upto 5MB per domain.
How Web Storage works ?
Web Storage stores the data in the form of key/value pair on the browser.
Web Storage stores data similar to HTTP session cookies, but it is better and faster than cookies storage.
Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
Web storage limit is far larger (at least 5MB) and information is never transferred to the server.
Web storage can store the retrieved data from all the other regions to one origin(regional domain).
Web storage allows us to store data for (at least 5MB) whereas in cookies the limit is (nearly 4KB).
Tutorial on html !!!
Click to Learn More about – HTML Tutorial for beginners
Types of Web Storage
There are two types of web storage listed below,
1. Local storage
2. Session Storage
Before using web storage, we have to check the browser support for localStorage and sessionStorage:
The latest versions of every browser supports HTML5 Storage.
How to check the browser supports for Web Storage ?
Example :
<!DOCTYPE html>
<html>
<body>
<script>
if(typeof(Storage)!=="undefined") {
alert("Hey, Your browser supports the Web Storage.");
}else{
alert("Sorry, your browser does not support Web Storage");
}
</script>
</body>
</html>
Output :
1. Local storage
Local Storages uses Windows.localStaorage object, to store data for your entire website on a permanent basis.
Local Storages stores the data with no expiration time, it stores permanently unless we remove it.
Since the data is stored permanently, even if the browser is closed and reopened the stored data will be available.
Storage size is not constant, it varies from browser to browser.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Web Storage API</title>
<style>
body{
color: blue;
text-align: center;
font-size: 30px;
margin-top: 30px;
font-style: italic;
}
</style>
</head>
<body>
<script>
if(typeof(Storage)!=="undefined") {
localStorage.setItem("Name","CSTechbook");
localStorage.setItem("Concept","Tutorials");
localStorage.setItem("Topics","Topics");
localStorage.setItem("html","HTML");
localStorage.setItem("html5","HTML5");
localStorage.setItem("java","CoreJava");
localStorage.setItem("Country", "India");
document.write("Welcome to "+ localStorage.Name+"<br/>");
document.write("Our Country is"+ localStorage.Country+"<br/>");
document.write("Our concept is teaching " +localStorage.Concept+"<br/>");
document.write("The Major "+ localStorage.Topics+"<br/>");
document.write("Covered is " +localStorage.html+","+localStorage.html5+","+localStorage.java);
}else{
alert("Sorry! your browser is not supporting the browser")
}
</script>
</body>
</html>
Output :
2. Session Storage
Session Storage uses Windows.sessionStorage object which stores data for one session and data will be lost if the window or browser tab will be closed.
This is like temporary storage, whenever the session ends or browser window/tab is closed the data will be lost.
Storage size is not constant, it varies from browser to browser.
Example :
<!DOCTYPE HTML>
<html>
<body>
<script type = "text/javascript">
if( sessionStorage.hits ) {
sessionStorage.hits = Number(sessionStorage.hits) +1;
} else {
sessionStorage.hits = 1;
}
document.write("Total Hits :" + sessionStorage.hits );
</script>
<p>Please Refresh the page to increase number of hits.</p>
<p>Close the window or open in the new tab the hit result starts from 1.</p>
</body>
</html>
Output :
3. Remove Web Storage
Local Storages stores the data permanently unless we remove it.
Session Storage is a temporary storage, whenever the session ends or browser window/tab is closed the data will be lost.
How to delete the stored data ?
To delete the storage data, we have to call two methods
1. localStorage.removeItem(‘key’)
If we want to delete the value on a particular key, then you can use the “key,” and that value will be deleted.
2. localStorage.clear()
If we want to delete or clear all settings with key/value pair, then you can call this method.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Web Storage API</title>
<style>
body{
color: green;
text-align: center;
font-size: 30px;
margin-top: 30px;
font-style: italic;
}
</style>
</head>
<body>
<button onclick="remove();">Remove item</button>
<div id="output"></div>
<script>
if(typeof(Storage)!=="undefined") {
localStorage.setItem("Name","CSTechbook");
localStorage.setItem("Concept","Tutorials");
localStorage.setItem("Topics","Topics");
localStorage.setItem("html","HTML");
localStorage.setItem("html5","HTML5");
localStorage.setItem("java","CoreJava");
localStorage.setItem("Country", "India");
document.write("Welcome to "+ localStorage.Name+"<br/>");
document.write("Our Country is"+ localStorage.Country+"<br/>");
document.write("Our concept is teaching " +localStorage.Concept+"<br/>");
document.write("The Major "+ localStorage.Topics+"<br/>");
document.write("Covered is " +localStorage.html+","+localStorage.html5+","+localStorage.java);
}
else{
alert("Sorry! your browser is not supporting the browser")
}
function remove() {
localStorage.removeItem("Name");
localStorage.removeItem("Concept");
localStorage.removeItem("Topics");
localStorage.removeItem("html");
localStorage.removeItem("html5");
localStorage.removeItem("java");
localStorage.removeItem("Country");
document.getElementById('output').innerHTML= "Welcome to "+ localStorage.Name+"<br/> Our Country is"+ localStorage.Country+"<br/>Our concept is teaching " +localStorage.Concept+"<br/>The Major "+ localStorage.Topics+"<br/>Covered is " +localStorage.html+","+localStorage.html5+","+localStorage.java;
}
</script>
</body>
</html>
Output :
Tutorial on html !!!
Click to Learn More about – HTML Tutorial for beginners
Advantages of Web Storage
1. Web Storage can use storage space upto 5MB per domain.
2. Once if the space limit is reached, the browser software will prompt the user about the space limit reached information.
3. It will not send data to the server side, hence it is faster than cookies storage.
4. The data stored by local Storage never expires, but cookies data expires after some time or session.
5. Web Storage is more secure than cookies.