☄ EXPOLORE MIND ⚜ Tutorial ? JIQA Biography News
PRV MENU NEXT

STORING

Course- HTML5 >

Webstorage

Storing information whenever we visit a website is known due to the concept of cookies. However, cookies are limited in size. The concept of cookies is that the browser sends these cookies to the web server every time we visit the web page.

However, HTML5 storage concept is more enhanced. The websites access this page with the aid of JavaScript whenever we visit the web page. The web page can only access the information stored by it and doesn't have access to any other data other than the stored information.

There are two types of storage methods used in HTML5 as follows:

  • sessionStorage
  • localStorage

 

sessionStorage

The sessionStorage property is used to store data for any specific session. Once

we close the browser, the session expires, and data will not be stored outside of that session. The amount of data that can be stored can be large in size unlike cookies that work under limitations. The data is stored in key/value pairs

EXAMPLE

<!DOCTYPE HTML>
<html>
<head>
<title> Session Storage: A part of HTML5 webstorage </title>
</head>
<body>
<script type = "text/javascript"> if(sessionStorage.visitWebsite) {
sessionStorage.visitWebsite = Number(sessionStorage.visitWebsite) +1;
}
else {
sessionStorage.visitWebsite = 1;
}
document.write("The user has visited this web page :" + sessionStorage.visitWebsite +" times");
</script>
<p> Click on F5 or Right click and click on Reload for information on the number of times this page has been
visited.</p>
</body>
</html>

In the preceding code, we can see the sessionStorage property is used, using which we can depict the number of times the user has visited that web page in that session. We also need to remember that once the browser is closed, the counter is reset.

Let's execute the preceding code and see the output in Opera, as shown in the following screenshot:

WEB STORING

Let's now reload the same page by right-clicking on the page or by pressing F5 to reload it twice.

We will see the following output:

We can see that the counter has been set to three as we reloaded the page 3 times. Now, let's close the browser window, and execute the code again. On executing the code in a new browser, we can see the following page:

We can see that the counter has been reset and the code output displays that the web page has been visited once. Hence, the data is stored for a speciic session and will be lost once the session expires after closing the browser.

Let's look at the localStorage property.

localStorage

The localStorage property is not limited to a specific session. The localStorage property takes into account the total number of times that the website has been visited. Data is stored at the client side and can be accessed each time we access the website. When we implement the storage feature using HTML5, the data is stored in your local machine such as a laptop, a desktop, or a tablet (the client side). Let's assume that we close the browser window. When we access the website again, the data stored locally can be accessed without any time limit.

Let's look at the following code to see how localStorage works:

<!DOCTYPE HTML>
<html>
<head>
<title> Local Storage in HTML5 </title>
</head>
<body>
<script type = "text/javascript"> if(localStorage.visitWebsite) {
localStorage.visitWebsite = Number(localStorage.visitWebsite) +1;
}
else {

localStorage.visitWebsite = 1;
}
document.write("The web page has been visited :" + localStorage.visitWebsite + " times");
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>

 

Let's execute the preceding code in Opera. When we execute the code for the First time, we get the following output:

When we reload the browser, we get the following output:

Now let's close the window and execute this code again in a new window to see the output, as shown in the following screenshot:

We can see that the counter is 3 even though we had closed the browser window and executed the code again in a new window. Hence, the stored data can be accessed at anytime with the aid of JavaScript in localStorage.

PRV MENU NEXT