What are the different types of storage in HTML5

0 4135

Web storage used to store data (client-side database) in a user's (client) web browser, included in every server request. It similar to cookies, but it is faster and much better than cookies.

Where cookies store a small amount of data like, (nearly 4KB), the web storage allows you to store up to 5MB of data. Web Storage is a new HTML5.

Note:

All Major Browsers Supports.

Google Chrome	Firefox	Safari	Internet Explorer

HTML5 offers two new objects for storing data on the client:

1) LocalStorage

LocalStorage is defined to store the data with no expiration date. It means, the data will be available (never delete) even when you close the browser/ browsing tab and it will be available there always.

LocalStorage is more secure and it has a large amount of storage capacity (up to 5MB), without affecting the performance of your website and application.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Local Storage</title>
</head>
<body>
<div id="showresult"></div>
<p><button onclick="clickCounter()" type="button">Click Here!</button></p>
<p>Click the button to see the counter increase.</p>
<p>The counter will always start from the same value (not going to reset)<br> where you left it
 when you last close your browser Tab (or Window)</p>
<script>
function clickCounter() {
  if(typeof(Storage) !== "undefined") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount)+1;
    } else {
      localStorage.clickcount = 1;
    }
    document.getElementById("showresult").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s).";
  } else {
    document.getElementById("showresult").innerHTML = "Sorry, your browser does not support web storage...";
  }
}
</script>
</body>
</html>

Output:

2) SessionStorage

The SessionStorage uses to store data on a temporary basis, for a single browser window or tab. The data disappears when the user closes the browser window or tab.

Therefore, SessionStorage is similar to LocalStorage, but only the difference is that the SessionStorage data available for the duration of the page session, and local storage store the data with no expiration date.

Example:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Sessions Storage</title>
</head>
<body>
<div id="showresult"></div>
<p><button onclick="clickCounter()" type="button">Click Here!</button></p>
<p>Click the button to see the counter increase.</p>
<p>The counter will always be resat to the beginning once <br>you close your browser tab (or Window)</p>
<script>
function clickCounter() {
  if(typeof(Storage) !== "undefined") {
    if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
    } else {
      sessionStorage.clickcount = 1;
    }
    document.getElementById("showresult").innerHTML = "You have clicked the button " + sessionStorage.clickcount + " time(s) in this session.";
  } else {
    document.getElementById("showresult").innerHTML = "Sorry, your browser does not support web storage...";
  }
}
</script>
</body>
</html>

Output: