What are the different types of storage in HTML5 ?

  • In HTML5, web storage is one of the great features. In Web storage, web applications can locally store data within the browser on the client side.
  • It is sometimes known as DOM storage and stores data in the form of key/value pair on the browser.
  • Web storage is better and faster than cookies storage, and storing data is similar to cookies.
  • Similarly, Web Storage can use storage space of up to 5MB per domain.
  • It is faster than cookies storage because It will not send data to the server side.
  • At web storage cookies data expires after some time or session but data stored by local Storage never expires.
  • There are two types of web storage, they are;
    • Local Storage
    • Session Storage

Local Storage

  • In this the local Storage object stores data locally within the browser.
  • The data stored by local Storage object does not have any expiration date.
  • The stored data will not be deleted if the browser is reopened or closed.
  • The key/values are always stored as String, and can be accessed with localStorage.setItem() and localStorage.getItem() methods.

Sample Code

<!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","Venkat");
localStorage.setItem("Country", "India");
document.write("Hi this is"+" "+localStorage.name+" "+"from" +" "+ localStorage.Country);
}
else{
alert("Sorry! your browser is not supporting the browser")
}
</script>
</body>
</html>

Output

Session Storage

  • The session storage is same as local storage, but session storage stores data only for one session.
  • If you close the browser, then data will be deleted or lost.

Sample Code

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>

<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>

</body>
</html>

Output

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like

What is a marquee tag ?

In HTML it is used to create scrolling text or image in a webpage. It scrolls either from vertically top to bottom or bottom to top or horizontally left to…
View Answer

How to Align Text in HTML ?

By using markup language, HTML is used to design webpages. It defines the link between the webpages. It defines the structure of webpages where markup language is used to define…
View Answer

How do you add buttons in HTML ?

In HTML <button> tag is used to clickable button within form on your webpage. We can put content like image or text within the <button>to</button> tag. For <button> tag we should…
View Answer