Learn About Java Frameworks, Data Science and Application Development with Examples

Tuesday, 25 July 2017

HTML 5 Web Storage - Local Storage and Session Storage

No comments :

Prerequisite: Basic JavaScript and HTML
Some theoretical knowledge on Web Storage:
With local storage, web applications can store data locally within the user's browser.
Before HTML5, application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.
The difference between Local and Session Storage: If you close the browser, the session of the browser will be ended. So, in session storage the stored data will get deleted when browser got closed. In local storage the data will not get deleted even though the browser is closed.
Code for Local Storage and Session Storage:

   <script type="text/javascript">
  if (typeof(Storage) !== "undefined") {
   // Store an Item // local storage will not get cleared untill the browser history gets cleared.
   localStorage.setItem('name','Hari Hara Kumar');
   sessionStorage.setItem('designation', 'Software Engineer'); 
   // Remove an Item
   /*localStorage.removeItem('name');*/
   console.log(localStorage.name);
   if (localStorage.name) {
    document.getElementById('name').innerHTML = localStorage.getItem('name');
   } else {
    document.getElementById('name').innerHTML = 'No Name Found';
   }
   if (sessionStorage.designation) {
    document.getElementById('designation').innerHTML = sessionStorage.getItem('designation');
   } else {
    document.getElementById('designation').innerHTML = 'No designation Found';
   }
  } else {
   console.log("local storage not supported");
  }
 </script>
Explanation for the above code:
if (typeof(Storage) !== "undefined")
The above condition is used to check whether the browser will support the HTML 5 web storage or not. If the browser is not supported then you can display a custom message to the user.
localStorage.setItem('name','Hari Hara Kumar');
The above code will store ‘name’ attribute to browser local and the data will not get erased when the browser is closed.
sessionStorage.setItem('designation', 'Software Engineer')
The above statement will store ‘designation’ attribute to browser session and the data will get erased when the browser is closed.
localStorage.removeItem('name');
The above snippet will remove the name attribute that is stored before (This statement is commented in the above code )
if (localStorage.name)
Above condition will check whether the attribute ‘name’ is stored in local or not.
localStorage.getItem('name');
Above statement will get the value that have been stored for ‘name’ attribute in local.
if (sessionStorage.designation)
Above condition will check whether the attribute ‘designation’ is stored in session or not.
sessionStorage.getItem('designation')
Above code will get the value that have been stored for ‘designation’ attribute in session. (Note: This data will get erased on close of the browser, since it is stored in session).
You can see the stored data in the browser. Go to the inspect element of your chrome browser (Hit F12 on the browser). Then go the application tab. Now you will see so many tabs in the left side. Now expand Local Storage/Session Storage tabs to see the data you stored. See the sample snapshot for your reference:
You can store JSON data also. If you need any code samples for JSON Objects, leave a comment here, I will work on it for you :)
I hope by now you got an idea on what is web storage and how it can be coded.
Try to built a Single note To-Do App using HTML 5 Web Storage. Requirement: Should have one text box. User will write a note in the text box and will go away from it. Then by using web storage you have to store the entered text in browser local.(Close the browser and open the link again, you should show the saved data in the text box). The page should have button called clear note and on click of the button the data should get cleared from browser local. Try to do this on your own. After completion you can validate it with my code, which is in my GitHub h4hari/My-Note-HTML-5-App

Give a try!
If you have any questions please feel free to leave a comment here.
Thank you for reading this article so far, if you like then please share with your friends and colleagues.
If you have knowledge,let others light their candles in it. — Margaret Fuller

No comments :

Post a Comment

Recent Posts on Spring Boot