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.
There are two types of storage methods used in HTML5 as follows:
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
<title> Session Storage: A part of HTML5 webstorage </title>
sessionStorage.visitWebsite = Number(sessionStorage.visitWebsite) +1;
sessionStorage.visitWebsite = 1;
document.write("The user has visited this web page :" + sessionStorage.visitWebsite +" times");
<p> Click on F5 or Right click and click on Reload for information on the number of times this page has been
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:
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.
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:
<title> Local Storage in HTML5 </title>
localStorage.visitWebsite = Number(localStorage.visitWebsite) +1;
localStorage.visitWebsite = 1;
document.write("The web page has been visited :" + localStorage.visitWebsite + " times");
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
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: