Online Certificate Courses HTML5 Course. HTML5 Certification, HTML5 Training, HTML5 Tutorials. 

What is HTML5 Web Storage

HTML5 introduces two new structures, that are like HTTP session cookies, mainly for storing structured data directly on the client-side in other to overcome the following disadvantages.

1. Regular cookies are added with every HTTP request, thereby slowing down your web application by transmitting the same data.

2. Regular cookies are added with every HTTP request, thereby sending data unencrypted over the internet.

3. Regular cookies are restricted to about 4 KB of data. This is not enough storage space to store the required data.

The two new web storages are called session storage and local storage, they would be required to handle different storage situations.

The newest versions of basically every browser have support for HTML5 Storage including Internet Explorer.

Session Storage

The Session Storage was built for situations in which the visitor is undergoing a single transaction but could also be doing multiple transactions in a different window all at the same time.

Example

HTML5 launched the sessionStorage attribute for javascript that would be used by websites to add required data to the session storage, and any page from the same site will be able to access it as long as it is opened in that particular browser window, that's why it is called the session storage. Immediately you close the particular browser window, the session would end and would be lost.

 The code below will set a session variable and access that variable:

<!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>Refreshing the page will increase number of hits,</p>
      <p>Then close the window and open it again and check the current result.</p>

   </body>
</html> 

Local Storage

The Local Storage is built for storing data across multiple windows and that also lasts more than the current session. Basically, web apps might want to store user data, like an entire user-written document or a user's mailbox, directly on the client-side because of performance reasons

Cookies can not handle this particular scenario well due to the fact that they are only transmitted with every request

Example

HTML5 launched the localStorage attribute that can be used to have access to a web page local storage section without any time limit and this local storage is available whenever you open that particular web page

The code below is the code that would set a local storage variable and access that variable every time this page is accessed, even next time when you open the window:

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>
		
      <p>Refreshing the page will increase number of hits.</p>
      <p>Then close the window and open it again and check the current result.</p>
</body> </html>

Delete Web Storage

Storage of sensitive user data on a local system is dangerous and it can leave a security breach point.

The Session Storage data will be deleted by the web browser after the current session gets terminated.

To delete a local storage data you will have to call the localStorage.remove('key') methodin which the 'key' is the key for the value you want to delete. If you need to clear all settings and dada, you will have to call the localStorage.clear() method.

Example 

<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page will not to increase the value of the hit counter.</p>
      <p>Then close the window and open it again and check the result.</p>

   </body>
</html>

90% Scholarship Offer!!

The Scholarship offer is a discount program to take our Course Programs and Certification valued at $70 USD for a reduced fee of $7 USD. - Offer Closes Soon!!

Copyrights © 2021. SIIT - Scholars International Institute of Technology is a subsidiary of Scholars Global Tech. All Rights Reserved.